antd按需加载

https://www.cnblogs.com/sunhang32/p/12157990.html

https://www.jianshu.com/p/bcd887d31046

今天在项目中用antd的时候发现antd样式无效，经过检查发现是因为我项目中用到了css modules。如果项目中只是引入antd.css，那么根据官网步骤配置webpack是不会有问题的。但是如果项目中同时引入css modules和按需引入antd，那么就会导致antd样式无效。

1.首先我项目中的配置是这样的

/*
  webpack.config.js中的配置
**/
module: { // 这里配置Babel
    rules: [
      {
        test: /(.jsx|.js)$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      }, 
      { // 这里配置这两个工具
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader"
          }, {
            loader: "css-loader",
            options: {
              modules: true, // 指定启用css modules
              importLoaders: 1,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }
   ]
}
/*
  .babelrc中的配置
**/
{
  "presets": ["react", "env", "stage-0"],
  "env": {
    "development": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          
          "imports": ["react"],
          
          "locals": ["module"]
        }]
      }]]
    }
  }
}

2.根据antd design 官网按需引入antd

• 首先安装babel-plugin-import

npm install babel-plugin-import --save-dev
yarn add babel-plugin-import

• babel-loader的query/options字段加入

"plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"  // style: true 会加载 less 文件
    }]
  ]

• .babelrc中plugins字段这样配置

{
  "presets": ["react", "env", "stage-0"],
  "env": {
    "development": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          
          "imports": ["react"],
          
          "locals": ["module"]
        }]
      }]]
    }
  },
  "plugins": [
    ["import",{
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"}] // antd按需加载
  ]
}

3.但是这样配置还是和antd的不一样，需要添加如下配置

//antd样式处理
{
   test:/.css$/,
   exclude:/src/,
   use:[
     { 
      loader: "style-loader"},
       {
         loader: "css-loader",
         options:{
           importLoaders:1
        }
      }
   ]
}

• 在webpack.config.js中配置如下

module: { // 这里配置Babel
    rules: [
      {
        test: /(.jsx|.js)$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      }, { // 这里配置这两个工具
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader"
          }, {
            loader: "css-loader",
            options: {
              modules: true, // 指定启用css modules
              importLoaders: 1,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }, { // antd样式处理
        test:/.css$/,
        exclude:/src/,
        use:[
          { loader: "style-loader"},
          {
            loader: "css-loader",
            options:{
              importLoaders:1
            }
          }
        ]
      }
    ]
}

 

 

0人点赞

 

自树一帜

 

 

"小礼物走一走，来简书关注我"

作者：秉持本心
链接：https://www.jianshu.com/p/bcd887d31046
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

 

https://www.jb51.net/article/156019.htm

 

我目前使用的antd版本是2.13。现在最新的是3.0.1。 

脚手架工具就是create-react-app。创建完成项目后，需添加配置，执行yarn eject 也就是打开配置的文档。 

然后安装第三方依赖yarn add babel-plugin-import --save-dev 

找到config文件夹。里面有2个配置文档， 

webpack.config.dev.js和webpack.config.prod.js 

添加配置时一定要保持文档的一致性。我就是犯了错误，值配置了开发的没有配置正式文档导致错误。 

首先打开webpack.config.dev.js 

在147行添加这段代码

1 2 3

plugins: [             ['import', [{ libraryName: "antd", style: 'css' }]],           ],

 

同样的配置在webpack.config.prod.js里面也需要添加。 

这样就真正实现了按需加载，就不会再报黄色的警告。

还有第二种简单的方式，就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖：yarn add babel-plugin-import --save-dev

1 2 3 4 5 6 7 8 9 10 11 12 13

"babel": {   "presets": [    "react-app"   ],   "plugins": [    [     "import",     {      "libraryName": "antd",      "style": "css"     }    ]   ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。