1、安装插件

npm i @craco/craco less craco-less -D
npm i @babel/plugin-proposal-decorators -S

2、修改package.json

修改前：

  "scripts": {
    "start": "set BROWSER=none&& react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

修改后：

  "scripts": {
    "start": "set BROWSER=none&& craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3、和package.json同级创建craco.config.js

const CracoLessPlugin = require('craco-less')
const path = require('path')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true
          }
        }
      }
    }
  ],
  babel: { plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]] },
  // webpack 配置
  webpack: { alias: { '@': path.resolve(__dirname, 'src') } }
}

4、npm start重启项目，可以使用less和别名了

5、vscode识别@路径并给出路径提示

1、根目录创建 jsconfig.json

2、在该配置文件中添加以下配置

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } }

3、无需重启项目，使用@符时可以看到路径提示