Vue.js에서 scss 사용하기

Vue-cli에서 프로젝트를 만들때 Css Pre-processors에서 SASS를 선택하면 

아래 설정없이 바로 style에서 선언하여 사용가능합니다. 

 

<style lang="scss" scoped>
@import "~styles/variables.scss";
 
.hello {
  background-color: $content_color;
}
</style>

 

 

만약 cli를 이용해서 생성시에 설정을 해주지 않았으면 아래처럼 별도로 설치후 사용하시면 됩니다. 

 

--------------------

 

Vue-cli 로 설치할 경우 간단한 설정만으로도 scss를 사용할수 있습니다 .

scss는 css를 좀더 편하게 사용할수 있게 해주는 확장언어입니다. (http://sass-lang.com/)

 

사용방법은 우선 "sass-loader","node-sass" js dependency를 추가합니다.

 

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

 

webpack.base.conf.js 파일의 설정을 변경합니다. 

module rules에 sass케이스를 추가합니다. 

 

{
    test: /.s[a|c]ss$/,
    loader: 'style!css!sass'
}

 

 

그리고 HelloWorld.vue의 style에 lang="scss"를 추가 합니다. 

 

<style lang="scss" scoped>
@import "~styles/variables.scss";
 
.hello {
  background-color: $content_color;
}
</style>

 

이렇게 해주면 sass이용이 가능합니다.