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"
}
]
]
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。