[Vue2 + SASS] 전역으로 SCSS 적용하기

1. sass, sass 설치

npm i -D sass sass-loader

 

2. scss 파일 작성

/src/assets/scss/_variables.scss

/src/assets/scss/base.scss

/src/assets/scss/reset.scss

 

 

3. vue.config.js 작성

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

 

 

4. 세팅할 때 에러

Sass Loader has been initialized using an options object that does not match the API schema.

해결방법

node 14 버전으로 사용하고 있으니까, node-sass@4.14.1 버전을 설치해서 사용하였다.

참고

https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/