今天的题目，猛一看是不是很惊讶！
啥玩意儿就给 React 穿上嫁衣了？
莫慌！简单来说，就是怎么给 React 定义主题颜色，也就是我们今天的主题。
创建 React 项目
首先，使用 React 脚手架创建一个 React 项目：npx create-react-app project 。当项目创建完成之后目录如图所示：
一个简单的项目目录，好像也没啥。但问题就在这里，怎么入手配置主题，值得咱们思考。
这里我推荐 antd 中使用的 craco 来添加 react 项目的配置文件，不建议使用 npm run eject 还原配置文件。具体操作如下：
-
安装 craco 安装指令 npm install @craco/craco
-
项目目录下添加新文件 craco.config.js
-
在 craco.config.js 中写入如下内容
module.exports = {
};
配置主题
接下来就是给 React 配置主题了。
这里我们使用 less 来定义主题变量，所以我们需要安装 less less-loader，并且还有一个模块不能忘了，它是 craco 和 less 的桥梁。
craco-less
npm i less less-loader craco-less
然后在 craco.config.js 中配置主题：
//craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#c63923','@gougou-color':'#81a6e9' },
javascriptEnabled: true,
}
}
}
}
]
};
在 lessOptions 中需要注意 modifyVars 这个属性，它就是用来定义主题变量的。 这里我们添加了两个主题标题，一个是 @promary-color，一个是 @gougou-color，共两个主题。
我们在项目中的 src 下将 App.css 改成 App.less 文件，在 App.js 中写入一个
<h3>勾勾的前端世界</h3>
同时在 App.less 中写入一个样式代码。
//App.less
h3{
color：@gougou-color；
}
注意
所有工作准备好之后，不能立即就启动指令，而是要在 package.json 中修改启动指令。
//package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
到此，整个主题的配置就算完事了，接下来我们 npm start 启动服务。在页面中就能看到这个主题颜色正常显示出来了。
