Antd 修改主題顏色填坑記錄

首先，讓我想說的是，現在有很多的更新，網上的一些也有的沒用了，

接下來讓我來分享一些我的解決方法，時間：2018.12/18.

1.和網上的一樣，我用的是creat-react-app創建的項目，修改主題的方式也是用的：run eject后的項目結構的webpack.config.dev.js修改

第一步：

yarn run eject

　或者

npm run eject　　

然后在目錄結構就會多一個文件夾

我們要修改的webpack.config.dev.js（開發時）和webpack.config.prod.js（打包時）文件，

但是還要下載幾個插件

1.下載babel-plugin-import

2.下載less和less-loader 

1.npm install babel-plugin-import -s

或者
yarn add babel-plugin-import

　　

2.
npm install -s less
 
//less-loader
npm install --save-dev less-loader less

或者

yarn add less

//less-loader

yarn add  less-loader

　　3.類似下載第三方插件的事就不多說了 進入正題。

1.打開webpack.config.dev.js

如圖

先嘮叨一下，網上有很多的過時了，比如修改

test: /\.(css)$/,

的，你會發現，根本沒有，結構都變了

那是因為

test: /\.(css)$/,

都寫成了這樣

我也是被坑的很慘，我為此找了好多文檔，終於總結出來了，開始

下載好之后，找到這個位置把 plugins改成如下

 

 "plugins": [
                    ["import", {"libraryName": "antd", "libraryDirectory":"es", "style": true}],
                [

　　然后ctrl+F 在搜索欄中輸入exclude 在exclude中加入/\.less$/,

 

最后在找到這個位置在rules中的use[]后面加入代碼如圖

{
            test: /\.less$/,
            //include: paths.appSrc,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader",// compiles Less to CSS
                options: {
                    sourceMap: true,
                    modifyVars: {
                        'primary-color': '#1DA57A',
                        'link-color': '#1DA57A',
                        'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                }
            }]
        },

　　最后重啟，效果如圖

如果此報錯

網上的，我也有這個錯誤，如果沒加/\.less$/,也會包這個錯誤