얼렁뚱땅개발로그^__^
[ React.js ] vite + typescript 프로젝트 절대경로 설정 본문
vite로 리액트 프로젝트를 생성하고, import 하는 과정에서 상대경로로 import를 하니 코드가 길어지고 불편함을 느껴서 절대경로로 (import '@styles/main.scss') 설정하는 방법을 찾아보았다.
craco를 설치해서 절대 경로를 설정할 수 있다고 하여 npm install로 설치하는 과정부터 애먹고 있던 와중에 vite + typescript로 프로젝트르를 생성한 경우에는 craco를 따로 install 하지 않아도 된다는 블로그를 발견했다.
tsconfig.json 과 vite.config.ts 두 개의 파일의 내용을 수정하면 절대 경로를 사용할 수 있다고 나와있었다.
* tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
...
"@styles/*": ["styles/*"]
...
},
"target": "ES2020",
....
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
* vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path"; // 추가
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
// 아래 내용 추가
resolve: {
alias: [
{ find: "@", replacement: path.resolve(__dirname, "src") },
{ find: "@pages", replacement: path.resolve(__dirname, "src/pages") },
{ find: "@styles", replacement: path.resolve(__dirname, "src/styles") }, // 절대경로 추가
],
},
});
위의 내용과 같이 추가하면 간편하게 절대경로를 사용할 수 있다.