vite에서 절대경로 설정하기

파일을 import 하다보면 경로가 너무 길어질 때가 있다

@import './src/assets/css/page/solution';

css 파일은 무조건 src 폴더의 assets/css 폴더에 들어있을테니 아래와 같이 수정해보자

vite.config.js

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@css': fileURLToPath(new URL('./src/assets/css', import.meta.url)),
    },
  }
});

```



적용 전
```javascript
@import './src/assets/css/page/solution';
```

적용 후
```javascript
@import '@css/page/solution';
```


훨씬 간단하게 import 경로를 지정할 수 있다