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$/,也会包这个错误