vue2 SCSS 전역 스타일 적용 및 Invalid options object 에러 해결

 

토이 프로젝트에 scss를 적용했는데 전역 스타일 적용 후 빌드 할 때 에러가 났다.

먼저 나는 vue2 (vue@2.6.14) 버전을 이용중.

 

여기서 전역 스타일 설정이란,

매번 스타일 영역에서 scss파일을 import하지 않고 사용하는 설정을 말한다.

---

scss 설치

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

 

위와 같이 설치하고, 아래와 같이 전역 설정을 해주자.

 

---

vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/_variables.scss"
        `
      }
    }
  }
}

 

그리고 빌드.

 

---

ValidationError: Invalid options object.

 ERROR  Failed to compile with 1 error

 error  in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss

Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

 

찾아보니 sass loader의 최신버전에서는 data 속성 대신 additionalData를 사용한다고 함.

다시 적용해서 빌드해보자.

 

---

vue.config.js

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

 

또 에러남

 

---

SassError: expected ";".

in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss

Syntax Error: SassError: expected ";".
  ╷
2 │           @import "@/assets/scss/_variables.scss"
  │                                                  ^
  ╵
  src/App.vue 2:50  root stylesheet

 

다행이게도 세미콜론; 누락 에러였다. import뒤에 추가해주자.

 

---

빌드 성공

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

 

에러는 마주했을 때 겁먹지 않는 게 제일 중요한 것 같다.