• 欢迎光临~

webpack css-loader模块化导致的antd样式不好用解决方案

开发技术 开发技术 2022-08-31 次浏览

css-loader 模块化会导致 antd 样式文件无效,解决的方式就是排除 node_modules 下的目标文件就可以
如果你用的 less 就可以按以下方式来配置

{
  test: /.less$/,
  include: /node_modules/, // node_modules 下的 less 文件不使用模块化
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ],
},
{
  test: /.less$/,
  exclude: /node_modules/, //  其它文件下的 less 文件正常使用模块化
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
      options: {
        // 开启css模块化
        modules: {
          namedExport: false,
          localIdentName: '[path][name]-[local]--[hash:base64:5]',
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ],
},
程序员灯塔
转载请注明原文链接:webpack css-loader模块化导致的antd样式不好用解决方案
喜欢 (0)