antd less css module 配置

最新推荐文章于 2025-02-10 10:11:56 发布

泛中游

最新推荐文章于 2025-02-10 10:11:56 发布

阅读量2.5k

点赞数

分类专栏： antd react 文章标签： react antd

本文链接：https://blog.csdn.net/ganxunzou/article/details/81221311

版权

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

antd

2 篇文章

订阅专栏

本文介绍如何在使用 Ant Design 时配置 Less 和 CSS Modules，实现组件样式隔离及按需加载。主要涉及 babel.rc 和 webpack.config.js 的设置。

摘要由CSDN通过智能技术生成

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
            },
    ],
},