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$/,也會包這個錯誤