antd css module

antd css module

使用antd 进行CSS Module配置一般需要考虑：按需加载 + CSS-Module。本文介绍 antd 用 css 方式加载并支持css-module。（less方式加载支持css-Module看：antd-less-css-module配置）

antd css-module 配置涉及两个地方

• babel.rc
• webpack.config.js

.babelrc

{
  "presets": [
    "react",
    ["es2015",{ "modules": false }],
    "stage-2"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    ["import", { "libraryName": "antd", "style": "css" }] // "style": "css" 关键点
  ]
}

webpack.config.js

{
    test: /\.css$/i,
    exclude: [/node_modules/],
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",
            options: {
                modules: true,
                localIdentName: "[name]__[local]--[hash:base64:5]"
            }
        },
        {
            loader: "postcss-loader"
        }
    ]
},
{
    // 只针对antd生效。exclude： 排除src，等于只针对node_modules
    test: /\.css$/i,
    exclude: [/src/], 
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",
            options: {
                importLoaders: 1
                // modules: true,
                // localIdentName: "[name]__[local]--[hash:base64:5]"
            }
        }
    ]
},