最近在項(xiàng)目中上antd時(shí)，發(fā)現(xiàn)了一個(gè)如果同時(shí)引入css modules和按需引入antd，antd樣式無(wú)效的問(wèn)題岗憋。
如果你的項(xiàng)目中只是引入antd迎献，那么根據(jù)官網(wǎng)步驟配置webpack應(yīng)該是不會(huì)有問(wèn)題的。
1. 首先在引入antd之前，我在webpack中已經(jīng)配置了css modules(css modules怎么使用這里我就不多說(shuō)了)，現(xiàn)在我的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. 根據(jù)antd design 官網(wǎng)按需引入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/,
},
]
}
- 測(cè)試
import { Button } from 'antd'
使用Button測(cè)試antd的引入發(fā)現(xiàn)樣式與官網(wǎng)Button的樣式不一致。
3. 解決辦法
- 如果你同時(shí)需要使用antd 和 css modules宿稀，處理樣式時(shí)趁舀，需要分別處理。
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
}
}
]
},
]
}
好了矮烹，現(xiàn)在可以愉快是使用antd組件開(kāi)設(shè)計(jì)的組件了。
