在 React 專案中配置路徑別名
阿新 • • 發佈:2021-11-13
1. 使用 craco 庫
下載:
npm i @craco/craco --save
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