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 CSSoptions: {sourceMap: true,modifyVars: {'primary-color': '#2CC597',},javascriptEnabled: true,}}]}]

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

4、重启项目 npm run dev

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

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

react+antd 修改主题色相关推荐

react+antd修改主题色
第一步:安装需要的插件 npm install react-app-rewired customize-cra babel-plugin-import less less-loader 第二步:修改p ...
elementPlus修改主题色以及皮肤设置思路
修改主题色 <el-color-picker style="margin-top:20px" v-model="systeamColor" @change ...
HBuilderx修改主题色-为css属性名与值添加颜色，改变编辑器背景颜色等
hbuilderx主题设置效果步骤 hbuilderx总共有三种主题,绿柔主题Default,酷黑主题Monokai,雅黑主题Atom One Dark,修改主题色是基于三种主题之一的,不能直接创 ...
Antd 修改主题颜色2018 最新版填坑记录
首先,让我想说的是,现在有很多的更新,网上的一些也有的没用了, 接下来让我来分享一些我的解决方法,时间:2018.12/18. 1.和网上的一样,我用的是creat-react-app创建的项目,修改 ...
uniapp 微信小程序配置全局主题色、实现动态修改主题色
前言: 本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调.第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色:第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色 ...
MahApps.Metro扁平化UI控件库（可修改主题色等）
一.名词解释使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...
React项目 antd 修改主题颜色
上官网
react 修改antd主题色
antd的主题色默认是蓝色的,但是看到官网上有很多配色很好看,所以想换个颜色试试,官网提供的色系: 安装antd less less-loader babel依赖 npm i antd less le ...
node-sass改dart-sass and 一些七七八八，实现sass主题色修改
sass相关七七八八 dart-sass sass SCSS变量 css变量 SCSS数据类型 !default 插值语句条件语句 @if @for循环 @each循环 @while循环 @impo ...

react+antd 修改主题色

react+antd 修改主题色相关推荐

最新文章

热门文章