其他分享
首页 > 其他分享> > 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,
        },
      },
    },
  ],
},

标签:node,less,模块化,modules,loader,webpack,antd,css
来源: https://www.cnblogs.com/brotheryang/p/16644410.html