美文网首页
dva 中使用 'and-mobile' ,按需加载,样式不起作

dva 中使用 'and-mobile' ,按需加载,样式不起作

作者: 你这个人真的是 | 来源:发表于2018-01-12 12:53 被阅读0次

    在使用 antd-mobile中,加载组件及组件的样式有多种引入方式,手动引入和按需加载(官方推荐的使用方式)。

    一、按需加载

    1、使用npm 安装babel-plugin-import: npm i --save-dev babel-plugin-import;
    2、在 .babelrc 中加入如下配置:

    // .babelrc or babel-loader option
    {
      "plugins": [
        ["import", { libraryName: "antd-mobile", style: "css" }] // style: true`会加载 less 文件
      ]
    }
    

    3、然后只需从 antd-mobile 引入模块即可,无需单独引入样式。

    // babel-plugin-import 会帮助你加载 JS 和 CSS
    import { DatePicker } from 'antd-mobile';
    

    奇怪的是,你会发现明明一样的配置却加载不出样式,翻来覆去,颠来倒去地检查,网上搜索答案 还是找不到原因。今天我将如上配置 放置 .roadhogrc 中,便可以正常加载出antd-mobile的样式了,以下是我的配置:

    {
      "entry": "src/index.js",
      "env": {
        "development": {
          "extraBabelPlugins": [
            "dva-hmr",
            "transform-runtime",
            [
              "import", {
                  "libraryName": "antd-mobile",
                  "style": true  // `style: true` 会加载 less 文件
              }
            ]
          ]
        },
        "production": {
          "extraBabelPlugins": [
            "transform-runtime",
            [
                "import", {
                    "libraryName": "antd-mobile",
                    "style": true  // `style: true` 会加载 less 文件
                }
            ]
          ]
        }
      }
    }
    

    二、手动引入

    import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS
    import 'antd-mobile/lib/date-picker/style/css';        // 加载 CSS
    

    相关文章

      网友评论

          本文标题:dva 中使用 'and-mobile' ,按需加载,样式不起作

          本文链接:https://www.haomeiwen.com/subject/vsgxoxtx.html