vue cli 3 sass resource 공유

공식문서에 따르면 

 

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      },
      sass: {},
      ...
    }
  }
}

 

이런식으로 추가한다음 넣어주는 option 값은 각각의 loader를 보고 삽입하라고 했다.

또한 공식문서에서는 sass loader에는 additionalData 라는 option이 있으며 이것을 이용해서 variable을 공유하는 sass 하나를 자동으로 추가해주라는 말이 있었는데 공식문서대로 하니까 에러뜨고 난리났다 ( 기준 버전 vue-cli@4.x )

 

에러 메세지를 제대로 안보고 이것저것 만져보며 삽질 엄청나게 하다가 결국 다음을 알았다.

 

"use strict";

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/assets/styles/variables.sass"`
      },
      scss: {
        prependData: `@import "~@/assets/styles/variables.sass";`
      }
    }
  }
};

 

왠진 모르겠지만 additionalData라는 opt은 없고 prependData라는 옵션으로 줘야 된다.

 

다음부턴 에러 메세지 잘보자...