antd less css module 配置

antd less css module 配置

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

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

• babel.rc
• webpack.config.js

babel.rc

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

webpack.config.js

{
    test: /\.less$/,
    include: [/src/],
    use: [
            require.resolve('style-loader'),
            {
                    loader: require.resolve('css-loader'),
                    options: {
                            modules: true,
                            localIndexName:"[name]__[local]___[hash:base64:5]"
                    },
            },
            {
                    loader: require.resolve('less-loader'), // compiles Less to CSS
            },
    ],
},
{
    test: /\.less$/,
    exclude: [/src/],
    use: [
            require.resolve('style-loader'),
            {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1
                            // modules: true,
                            // localIndexName:"[name]__[local]___[hash:base64:5]"
                    },
            },
            {
                    loader: require.resolve('less-loader'), // compiles Less to CSS
            },
    ],
},