在 React 项目中配置路径别名

1. 使用 craco 库

下载：

npm i @craco/craco --save

craco的GitHub地址

2. 创建文件

创建名为craco.config.js的文件在项目根路径上，和package.json同一级。

my-app
├── node_modules
├── craco.config.js
└── package.json

3. 修改 package.json 文件

/* package.json */

"scripts": {
-   "start": "react-scripts start", // 删除
+   "start": "craco start", // 添加
-   "build": "react-scripts build",// 删除
+   "build": "craco build"// 添加
-   "test": "react-scripts test",// 删除
+   "test": "craco test"// 添加
}

4. 配置文件

// craco.config.js
const path = require("path");

const reslove = dir => path.reslove(__dirname, dir);

module.exports = {
    webpack: {
        alias: {
            "@": reslove("src"),
            "components": reslove("src/components")
        }
    }
}

5. 使用

// 原来导入
import "./assets/css/reset.css"

// 现在导入
import "@/assets/css/reset.css"