1. 程式人生 > 其它 >在 React 專案中配置路徑別名

在 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"

人生人山人海人來人往,自己自尊自愛自由自在。

本文來自部落格園,作者:青檸i,轉載請註明原文連結:https://www.cnblogs.com/fuct/p/15549609.html