项目使用的时 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~~~
当自己操作都是正确,但没达到预期效果时,找不到其他原因时,可以考虑重启电脑 或者 以管理员身份运行

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐