方法一
在webpack的config中分别编译antd的样式和项目中的css
精确匹配antd的样式,对于antd的样式不启用css modual
{ test: /\.css$/i, exclude:[/node_modules/], use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: { exportGlobals: false, localIdentName: "[local]__[hash:base64]", }, }, }, ], },
// 匹配antd的css,不启用css modual { test: /\.css$/, include: [/[\\/]node_modules[\\/].*antd/], use: [ // MiniCssExtractPlugin.loader, {loader: 'style-loader'}, {loader: 'css-loader'} ] },
在根文件中引入antd样式
import 'antd/dist/antd.css';
方法二
在webpack配置文件中
{ test: /\.css$/i, oneOf: [{ resourceQuery: /^\?raw$/, use: [ require.resolve('style-loader'), require.resolve('css-loader') ] }, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: { exportGlobals: false, localIdentName: "[local]__[hash:base64]", }, }, }, ], },
引入antd是加上?raw
import 'antd/dist/antd.css?raw';
样式就出来了