react项目中修改ant design 主题色

react项目中修改ant design 主题色

1、安装less和less-loader

npm i less --save

注意：less-loader 版本大于等于5.0.0

npm i less-loader --save

2、在webpack.config.dev.js文件中添加如下代码

  {
            test: /\.less$/,
            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: {
                    javascriptEnabled: true,
                    modifyVars: {
                        '@primary-color': '#F08300',//主题色
                        '@link-color': '#F08300',//链接色
                    }
                }
            }]
        },

3、如果你的项目使用的是stylus，已经存在配置项

如下：

       {
            test: /\.styl$/,
            use: [
                {
                  loader: 'style-loader'
                },
                {
                  loader: 'css-loader'
                },
                {
                  loader: 'stylus-loader'
                }
            ]
          },

在同级别添加1中代码

   // 修改主题色
          {
            test: /\.less$/,
            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: {
                    javascriptEnabled: true,
                    modifyVars: {
                        '@primary-color': '#F08300',
                        '@link-color': '#F08300',
                    }
                }
            }]
        },
          //  setting stylus mode
          {
            test: /\.styl$/,
            use: [
                {
                  loader: 'style-loader'
                },
                {
                  loader: 'css-loader'
                },
                {
                  loader: 'stylus-loader'
                }
            ]
          },

4、webpack.config.prod.js设置同上面三步

5、package.json 设置星星中间

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

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "transform-decorators-legacy",
      "react-hot-loader/babel",
        ***************************************
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }
      ]
        **************************************
    ]
  }

常用样式变量

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影