[Vue.js] Sass 사용시 변수를 전역에서 사용하기

Sass를 사용하면 원하는 디자인 값을 변수에 할당하여 사용할 수 있는 장점이 있다.

 

디자인 변수를 사용하면 나중에 변수의 값만 바꾸어 줌으로써 유지보수 부분에서 엄청난 장점을 가지게 된다.

 

현재 진행하고 있는 프로젝트의 사이즈가 조금 더 커질 예정이라 Sass 변수를 사용해보려고 한다.

 

사용할 변수는

가장 많이 사용할 것 같은 프로젝트 메인 컬러와 서브 컬러로 우선 테스트해보았다.

 

Vue 프로젝트에서 변수명을 사용할 경우,

변수 파일을 만들고, 해당 각 파일을 import 해서 사용한다.

// Main.vue

...

<style lang='sass'>
@import '@/assets/sass/common.sass'

.main {
	background: $MAIN-COLOR;
}
</style>

...

하지만 여러 변수를 사용하다 보면 대부분의 파일에서 변수 파일을 import 할 텐데,

모든 파일에 `@import ~`를 써주는 코드 중복도 해결해 보았다.

 

기존의 vue.config.js 파일에 아래 코드를 추가해주었다.

파일이 없다면 root 경로에 vue.config.js 파일을 추가하고 작성한다.

module.exports = {
  css : {
    loaderOptions : {
      sass : {
        additionalData: `
          @import "@/assets/sass/common.scss";
        `
      }
    }
  }
}

 

### Reference

Vue. vue-cli에서 SCSS 적용과 Global SCSS 적용