使用create-react-app创建react项目中 craco 配置less和装饰器

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