[ Nuxt.js ] 글로벌 css파일, 미디어쿼리 적용하기

1.Vue는 main.js에서 css파일을 require 해주면 된다.

2. Nuxt는 nuxt.config.js 파일에 아래와 같이 추가해 주면된다.

3.scss를 사용할 경우

>$ npm i sass-loader node-sass --save-dev  //설치 해준다.

style 태그에 scss 사용한다고 명시해준다.

로컬에서 사용하고 싶을 경우, style 태그 마지막에 scoped 키워드를 붙혀주면 된다.

4. 미디어 쿼리 사용해야 할 경우

>$ npm i nuxt-mq // 설치해 준 뒤,

nuxt.config.js에 사용할 준비를 마친다. breakpoints는 각 화면 너비 값이다.

미디어 쿼리 적용해야할 요소에 :class="mq"라고 지정해 주면 $mq부분이 화면 사이즈에 따라 알아서 pc가 되기도 labtop이 되기도 한다.

그리고 .pc , .labtop 아래에 CSS 효과를 각각 넣어주면 됨.