antd样式按需加载

今天在项目中用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
            }
          }
        ]
      }
    ]
}