react+antd 修改主题色

项目使用的时 react 框架 和 ant design ui组件库

antd 官网中对定制主体是这样说的

详见：https://ant.design/docs/react/customize-theme-cn

官网说的是 antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量
然而我的项目中使用的是 sass 语言

所以要想修改antd 主体颜色，首先需要
1、安装 less 依赖包
npm install less-loader
npm install less

2、修改 config/webpack.config.js 文件

 rules: [
        // 新增 less 配置
        {
          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': '#2CC597',
                  },
                  javascriptEnabled: true,
              }
          }]
      }
    ]

3、在 src/index.js 中引入antd/dist/antd.less 样式

4、重启项目 npm run dev

此时发现样式并没有生效，找原因，以为 less-loade r版本不对，或者 引入的地方不对，瞎操作一大堆还是不行
结果第二天重启电脑再次运行项目时发现主题色已经改变了

很 nice~~~
当自己操作都是正确，但没达到预期效果时，找不到其他原因时，可以考虑重启电脑 或者 以管理员身份运行