使用create-react-app创建react项目中 cra

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

image.png

4.配置装饰器:

安装:

cnpm install --save @babel/plugin-proposal-decorators

在craco.config.js文件中新增以下代码即可:

babel: {
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
  }