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