最近在项目中上antd时，发现了一个如果同时引入css modules和按需引入antd，antd样式无效的问题。
如果你的项目中只是引入antd，那么根据官网步骤配置webpack应该是不会有问题的。
1. 首先在引入antd之前，我在webpack中已经配置了css modules(css modules怎么使用这里我就不多说了)，现在我的webpack是这样的：
module:{
rules:[
{//ES6、JSX处理
test:/(\.jsx|\.js)$/,
exclude: /node_modules/,
loader:'babel-loader',
query:
{
presets:["env", "react"],
},
},
{//CSS处理
test: /\.css$/,
loader: "style-loader!css-loader?modules",
exclude: /node_modules/,
},
]
}
2. 根据antd design 官网按需引入antd
首先安装 babel-plugin-import。
npm
npm install babel-plugin-import --save 或 cnpm install babel-plugin-import --save
yarn
yarn add babel-plugin-importbabel-loader的query/options字段加入
plugins: [
[ "import",{libraryName: "antd", style: 'css'}] // antd按需加载
]
- webpack中plugins字段这样配置:
module:{
rules:[
{//ES6、JSX处理
test:/(\.jsx|\.js)$/,
exclude: /node_modules/,
loader:'babel-loader',
query:
{
presets:["env", "react"],
plugins: [
[ "import",{libraryName: "antd", style: 'css'}] // antd按需加载
]
},
},
{//CSS处理
test: /\.css$/,
loader: "style-loader!css-loader?modules",
exclude: /node_modules/,
},
]
}
- 测试
import { Button } from 'antd'
使用Button测试antd的引入发现样式与官网Button的样式不一致。
3. 解决办法
- 如果你同时需要使用antd 和 css modules，处理样式时，需要分别处理。
webpack加入以下处理：
{//antd样式处理
test:/\.css$/,
exclude:/src/,
use:[
{ loader: "style-loader",},
{
loader: "css-loader",
options:{
importLoaders:1
}
}
]
},
- 最后webpack中是这样的：
module:{
rules:[
{//ES6、JSX处理
test:/(\.jsx|\.js)$/,
exclude: /node_modules/,
loader:'babel-loader',
query:
{
presets:["env", "react"],
plugins: [
[
"import",
{libraryName: "antd", style: 'css'}
] //antd按需加载
]
},
},
{//CSS处理
test: /\.css$/,
loader: "style-loader!css-loader?modules",
exclude: /node_modules/,
},
{//antd样式处理
test:/\.css$/,
exclude:/src/,
use:[
{ loader: "style-loader",},
{
loader: "css-loader",
options:{
importLoaders:1
}
}
]
},
]
}
好了，现在可以愉快是使用antd组件开设计的组件了。
