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

本文主要是介绍webpack css-loader模块化导致的antd样式不好用解决方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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样式不好用解决方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！