1.创建项目依次执行以下命令:
yarn create react-app 项目名
cd 项目名
yarn add antd
yarn start
2.安装craro并配置less
安装craro:
yarn add @craco/craco
修改package.json文件:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
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文件
此处我再index.js里引入index.less
![](https://img.haomeiwen.com/i19825289/2857d671a44a6473.png)
4.配置装饰器:
安装:
cnpm install --save @babel/plugin-proposal-decorators
在craco.config.js文件中新增以下代码即可:
babel: {
plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
}
网友评论