项目中样式采用CSS Modules的写法,构建之后会被重命名。如果项目中引入了Ant Design的样式,则会导致样式加载不到问题。
解决方式有两种:
- 打包后在html中重新引入antd.css文件。但是无法做到按需加载,且打包的css文件中存在多余的内容。
- 项目使用Dawn构建,配置webpack.config.js。代码如下
module.exports = function (webpackConfig) {
webpackConfig.module.loaders.forEach(item => {
if (item.test.test('.css')) {
item['exclude'] = [/node_modules/];
}
});
webpackConfig.module.loaders.push({
test: /\.css$/,
include: /node_modules/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
}
],
});
};