Ant Design 在 create-react-app 中定制主题具体步骤和遇到的坑
程序员文章站
2022-03-21 11:32:37
1、安装craco。$ yarn add @craco/craco修改 package.json 里的 scripts 属性。"scripts": {- "start": "react-scripts start",- "build": "react-scripts build",- "test": "react-scripts test",+ "start": "craco start",+ "build": "craco build",+ "test": "c...
1、安装craco。
$ yarn add @craco/craco
修改 package.json 里的 scripts 属性。
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
2、安装craco-less。
$ yarn add craco-less
然后在项目根目录创建一个 craco.config.js 用于修改默认配置。
配置内容如下:
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
'@primary-color': '#6690dd', // 全局主色
'@link-color': '#18ffff', // 链接色
'@success-color': '#52c4ff', // 成功色
'@warning-color': '#faad14', // 警告色
'@error-color': '#e30020', // 错误色
'@font-size-base': '12px', // 主字号
'@heading-color': '#333333', // 标题色
'@text-color': '#666666', // 主文本色
'@text-color-secondary': '#999999', // 次文本色
'@disabled-color': '#bbbbbb', // 失效色
'@border-radius-base': '5px', // 组件/浮层圆角
'@border-color-base': '#e5e5e5', // 边框色
},
javascriptEnabled: true,
},
}
},
},
],
};
3、使用yarn start 启动项目
如出现编译是提示react-scripts版本过低需要进行升级则返回需要重新安装craco/craco与craco-less
使用如下版本号,本人使用的是 “react-scripts”: “3.4.3” 在启动项目的时候遇到上述提示,使用如下版本号后成功启动:
$ yarn add @craco/craco@5.6.4
$ yarn add craco-less@1.17.1
啦啦啦 然后主题就愉快的定制好啦~~~~~✿✿ヽ(°▽°)ノ✿。
如果帮到你,请给博主一个小心心。
本文地址:https://blog.csdn.net/qq_36639377/article/details/113974735
上一篇: VBS获取重定向的URL的代码