antd按需引入样式无效

最新推荐文章于 2025-09-26 02:28:53 发布

原创最新推荐文章于 2025-09-26 02:28:53 发布 · 8.4k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了解决Antd组件库与CSS Modules在同一项目中共存时样式冲突的方法。通过调整Webpack配置，实现了Antd组件按需加载的同时保持样式正常显示。

##最近在项目中上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-import`

- babel-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组件开设计的组件了。