1.创建项目依次执行以下命令:
yarn create react-app 项目名
cd 项目名
yarn add antd
yarn start
2.安装craro并配置less
先安装craro,并修改package.json文件:
安装命令:yarn add @craco/craco
修改package.json:
3.安装craco-less,在package.json同级目录下创建一个craco.config.js文件(注意不要拼写错了),并配置为下面这个样子就好啦:
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true
}
}
}
}
],
};
注意一个小点:要在公共入口引入antd的less文件哦,比如我的入口文件是route,
4.配置装饰器:
安装:
cnpm install --save @babel/plugin-proposal-decorators
在craco.config.js文件中新增以下代码即可:
babel: {
plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
}
贴一个craco.config.js的完整代码:
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true
}
}
}
}
],
babel: {
plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
}
};
再yarn start 重启一下就成功啦! 记录一下~~~~~~
参考了大佬博客:https://blog.csdn.net/sinat_36728518/article/details/106442846