Vue.js에서 Sass(SCSS) 사용하기

◽ Sass(Syntactically Awesome Style Sheets)란?

- 대표적인 CSS 전처리기 중 하나입니다.

- CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있습니다.

- 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다.

 

◽ SCSS(Sassy CSS)란?

- Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

- {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다.

 

◽ CSS로 컴파일하는 도구

- Webpack: 모듈 번들러

- Gulp: 빌드 자동화 도구

 

 

1. scss 파일 만들기

 

scss 파일 속에 .scss 파일은 만들어줍니다.

 

 

 

 

 

2. scss파일 import 하기

 

 

 

 

 

3. sass-loader 설치하기

만일 에러가 발생한다면, sass-loader에 대한 install이 필요합니다.

npm install --save-dev node-sass sass-loader