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