webpack4 css-loader modules

2021-08-31  本文已影响0人  Shiki_思清

有些第三方组件的css需要通过require引入,这与模块化css发生冲突,导致样式引入失败

解决办法:

  1. 将需要模块化与不需要模块化的配置单独配置
  2. 通过exclude 和include来过滤
 {
        test: /\.css$/,
        exclude: /node_modules[\\/]codemirror/,   // 非codemirror 目录下的css均要模块化
        use: [
          {
            loader: 'style-loader'
          }, {
            loader: 'css-loader',
            options: {
              modules: true,  // 此处为开启模块化开关
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64:5]',
              camelCase: true
            }
          }, {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: function () {
                return [
                  postcssImport,
                  postcssVars,
                  autoprefixer
                ];
              }
            }
          }
        ]
      },
{
   test: /\.css$/,
   include: /node_modules[\\/]codemirror/,   // 该codemirror 目录下的css不要模块化
   use: [
       {
          loader: 'style-loader'
       }, {
          loader: 'css-loader'  // 此处不要模块化开关
       }
    ]
},
上一篇 下一篇

猜你喜欢

热点阅读