有些第三方组件的css需要通过require引入,这与模块化css发生冲突,导致样式引入失败
解决办法:
- 将需要模块化与不需要模块化的配置单独配置
- 通过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' // 此处不要模块化开关
}
]
},