[ Vue ] 새 프로젝트에서 SCSS 사용하기

 

sass랑 sass-lodaer를 설치하면 되는 간단한 사용법이지만 

주의해야 할 점이 있어 정리하는 포스트🤣

 

 

! 알아두기

Vue CLI로 프로젝트를 시작할때

위의 이미지와 같은 preset을 선택한 경우

최신 버전의 sass-loader를 사용하면 아래와 같은 오류를 만날 수 있다

 

 

[ Vue Error ] sass-loader 설치 오류 : TypeError: this.getOptions is not a function

 

설치방법

새로운 버전의 sass-loader가 작동되지 않을 수 있으니

10.0.0버전으로 낮춰서 설치해야 하므로 아래 처럼 설치한다.

npm i sass
npm i sass-loader@10 

 

 

webpack.config.js에 추가

//vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/style/style.scss";
                    //@는 /src 와 같다
                `
            }
        }
    }
}

 

파일에 style과 script로 Import 하는 방법