antd按需加载
https://www.cnblogs.com/sunhang32/p/12157990.html
https://www.jianshu.com/p/bcd887d31046
今天在项目中用antd的时候发现antd样式无效，经过检查发现是因为我项目中用到了css modules。如果项目中只是引入antd.css，那么根据官网步骤配置webpack是不会有问题的。但是如果项目中同时引入css modules和按需引入antd，那么就会导致antd样式无效。
1.首先我项目中的配置是这样的
/*
webpack.config.js中的配置
**/
module: { // 这里配置Babel
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{ // 这里配置这两个工具
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
importLoaders: 1,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
]
}
]
}
/*
.babelrc中的配置
**/
{
"presets": ["react", "env", "stage-0"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
2.根据antd design 官网按需引入antd
- 首先安装babel-plugin-import
npm install babel-plugin-import --save-dev
yarn add babel-plugin-import
- babel-loader的query/options字段加入
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // style: true 会加载 less 文件
}]
]
- .babelrc中plugins字段这样配置
{
"presets": ["react", "env", "stage-0"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
},
"plugins": [
["import",{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"}] // antd按需加载
]
}
3.但是这样配置还是和antd的不一样，需要添加如下配置
//antd样式处理
{
test:/\.css$/,
exclude:/src/,
use:[
{
loader: "style-loader"},
{
loader: "css-loader",
options:{
importLoaders:1
}
}
]
}
- 在webpack.config.js中配置如下
module: { // 这里配置Babel
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, { // 这里配置这两个工具
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
importLoaders: 1,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
]
}, { // antd样式处理
test:/\.css$/,
exclude:/src/,
use:[
{ loader: "style-loader"},
{
loader: "css-loader",
options:{
importLoaders:1
}
}
]
}
]
}
"小礼物走一走，来简书关注我"
作者：秉持本心
链接：https://www.jianshu.com/p/bcd887d31046
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
我目前使用的antd版本是2.13。现在最新的是3.0.1。
脚手架工具就是create-react-app。创建完成项目后，需添加配置，执行yarn eject 也就是打开配置的文档。
然后安装第三方依赖yarn add babel-plugin-import --save-dev
找到config文件夹。里面有2个配置文档，
webpack.config.dev.js和webpack.config.prod.js
添加配置时一定要保持文档的一致性。我就是犯了错误，值配置了开发的没有配置正式文档导致错误。
首先打开webpack.config.dev.js
在147行添加这段代码
|
1
2
3
|
plugins: [ ['import', [{ libraryName: "antd", style: 'css' }]], ], |
同样的配置在webpack.config.prod.js里面也需要添加。
这样就真正实现了按需加载，就不会再报黄色的警告。
还有第二种简单的方式，就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖：yarn add babel-plugin-import --save-dev
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": "css" } ] ] |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
