美文网首页
Antd如何在现有的项目上更换主题色

Antd如何在现有的项目上更换主题色

作者: 甘道夫老矣 | 来源:发表于2021-07-13 14:20 被阅读0次

1.安装less 和less-loader
注意:less-loader的版本需要兼容webpack的版本,否则会报错,建议版本地点,我选择的是5.0.0版本的less-loader

2.修改webpack.config.js文件,如果没有这个文件执行npm run eject

//找到getStyleLoaders,添加下面的代码
  {
        loader: require.resolve("less-loader"),
        options: {
     
            modifyVars: {
              "primary-color": "#13CCA0",
              'link-color': '#13CCA0',
              'text-color': '#666666',
              'error-color': '#db2a36',
              'success-color': '#1b733e',
              'waring-color': '#ffd00b',
              'heading-color': '#272933'
            },
            javascriptEnabled: true,
      
        },
        },

颜色参考antd官网来进行修改哪些内容


image.png

3.把引入的样式改成less,在index.js中


image.png

相关文章

网友评论

      本文标题:Antd如何在现有的项目上更换主题色

      本文链接:https://www.haomeiwen.com/subject/gceypltx.html