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"
}
]
]
|
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。