[VueJS] vue 프로젝트에서 CSS 전처리기(Pre-Processor) 전역 스타일 설정하기

vue 프로젝트에서 CSS 전처리기(예를 들어 sass, scss, less 같은 것들)를 사용할 때 가장 난감한 게, vue는 싱글 파일 컴포넌트 형식으로 .vue 파일 안에 스타일 역시 존재하는데, 여기서 전역으로 설정된 변수 같은 것들을 항상 import 해서 사용해줘야 하는 불편함이 생긴다.

 

그렇기 때문에 자주 사용하는 변수나, mixin같은 경우 전역 스타일로 설정하여 사용을 해야한다.

전역 스타일 설정은 vue.config.js 파일에서 설정해 주면 된다.

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // by default the `sass` option will apply to both syntaxes
      // because `scss` syntax is also processed by sass-loader underlyingly
      // but when configuring the `prependData` option
      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
      // in that case, we can target the `scss` syntax separately using the `scss` option
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // pass Less.js Options to less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

이런 식으로 설정을 해둘 경우 전역으로 설정되어있는 변수 같은 것들을 따로 import를 하지 않고도 사용이 가능하다.

(물론 본인이 사용하는 전처리기 설정만 가져다 사용하면 된다.)

---

* 본 게시글은 scss를 기준으로 작성하였기 때문에 sass 나 less를 사용할 경우 따로 더 찾아보는 걸 권장한다.

---

참고: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

Working with CSS | Vue CLI