vue 프로젝트에서 global로 scss 등록하기 (vue.config.js)

사연

vue 프로젝트 어디에서나 불러다 쓰고 싶은 scss 변수가 필요

해결

module.exports = {
  outputDir: 'static',
  assetsDir: 'assets',
  
  ...

  css: {
    sourceMap:true,
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/scss/variables/_variables.scss";
        `
      }
    }
  }
  
  ...
  
}

vue.config.js에 해당 sass.additionalData에 필요한 변수가 들어있는 scss파일을 import해주면 된다.!

사용

<style lang="scss">
body {
	background-color: $custom-main-color;
}
</style>