十四 react中的 配置路径别名@为src 和 less 样式

npm i @craco/craco@alpha -D

创建craco.config.js 文件

文件内容
const path = require('path')
const CracoLessPlugin = require('craco-less');

const resolve = pathname => path.resolve(__dirname, pathname)

module.exports = {
  // less
  plugins: [
    {
      plugin: CracoLessPlugin
    },
  ],
  // webpack
  webpack: {
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components"),
      "utils": resolve("src/utils")
    }
  }
}

修改 package.json 文件的启动模式为 carco
 
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

安装caro-less ，注意 因为carco版本是7.0的，所以要这样安装对应的less
npm install craco-less@2.1.0-alpha.0

创建一个 less文件，测试less样式是否生效，然后再 index.js文件引入less文件
import "@/assets/css/index.less"