3.7.3 외부 스타일

외부 스타일 방법은 CSS 파일을 따로 작성해 스타일을 지정하는 방법입니다. 뷰에서 CSS 파일의 위치가 공식적으로 정해진 바는 없으나 관례상 src 폴더 하위에 있는 assets 폴더에 작성합니다.

src/assets/main.css

h1 {
  color: red;
  font-style: italic;
}

해당 경로에 작성한 CSS 파일을 <style> 태그에서 @import 문으로 참조해 스타일을 적용합니다. 단, 이 방법은 <style> 태그에 scoped 속성의 사용 여부와 상관없이 모든 컴포넌트에 스타일이 적용됩니다.

src/App.vue

<template>
  <h1>External Style</h1>
</template>
<style>
@import './assets/main.css';
</style>