[vue.js] cdn CSS 파일 추가하기

Vue 프로젝트 내에 cdn CSS 파일을 추가하는 방법

1. Purpose

일반적으로 html 파일 내에서 외부 CSS 파일을 추가하기 위해서는 <link> 태그를 주로 이용한다. 하지만 컴포넌트 단위 개발을 진행하는 Vue의 경우 기본적으로 .vue 확장자 파일 내에 <style> 태그도 함께 존재한다. 하지만, 부트스트랩과 같이 cdn을 활용하여 웹 상의 CSS 파일을 불러오기 위해서 <style> 태그 내에 <link> 태그를 넣어도 해당 CSS 파일이 적용되지 않는다. 따라서 cdn CSS 파일은 다른 방법으로 추가해야 한다.

2. Usage

상상 이상으로 정말정말 간단하다! Component를 구성하는 vue 파일 내에서 <style> 태그 내에 import 문을 작성해주면 된다. 즉, 아래와 같이 구성하면된다.

<style>
  @import "https://cdn-css-file.css";
</style>

3. Reference

1. How to add cdn css file to Vue Cli 3 project? [link]