解决webpack5 css开启modules时antd样式不生效的问题

最新推荐文章于 2024-04-26 22:14:41 发布

qiaoxinlin

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量956

点赞数

分类专栏： js webpack 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_45540782/article/details/126617691

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

解决webpack5 css开启modules时antd样式不生效的问题

参考https://blog.csdn.net/mccgodlov/article/details/117336102

        {
          test: /\.(css|less)$/,
          // 采用css modules的解析方式时，排除对node_modules文件处理
          exclude: /node_modules/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                modules: {
                  mode: 'local',
                  localIdentName: '[name]__[local]--[hash:base64:5]',
                },
              },
            },
            'postcss-loader',
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  javascriptEnabled: true,
                  modifyVars: {
                    '@ant-prefix': '_ant',
                  },
                },
              },
            },
          ],
        },
        // 解决使用css modules时antd样式不生效
        {
          test: /\.(css|less)$/,
          // 排除业务模块，其他模块都不采用css modules方式解析
          include: [/node_modules/], // antd(node_modules文件)目录
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
            },
            'postcss-loader',
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  javascriptEnabled: true,
                  modifyVars: {
                    '@ant-prefix': '_ant',
                  },
                },
              },
            },
          ],
        },