다음처럼 alias 속성의 값을 추가하면 CSS 파일 경로를 훨씬 더 간단하게 참조할 수 있습니다.
vite.config.js
export default defineConfig({
(중략)
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)), '~': fileURLToPath(new URL('./src/assets', import.meta.url)),
},
},
})
이제 SFC 파일의 컴포넌트에서 @import 문으로 간단하게 외부 CSS 파일을 참조할 수 있습니다.
<template>
<h1>External Style</h1>
</template>
<style>
@import '~/main.css';
</style>