더북(TheBook)

다음처럼 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>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.