[Nuxt.js] scss 설치하기

node-sass, sass-loader 설치

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

 

nuxt.config.js 설정

// nuxt.config.js
export default {
 css: [
   '~assets/scss/app.scss'
   ]
}

 

error 발생

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

설치 후 위와 같은 에러가 발생한다면 버전 호환이 되지 않아 발생하는 에러다.

기존 모듈을 삭제하고 버전 10을 설치한다.

// 기존 모듈 삭제
npm uninstall sass-loader
// 10버전 재설치
npm install --save-dev sass-loader@10

그 후 package.json에서도 버전 10으로 수정해준다.

// package.json
"sass-loader" : "^10",

 

전역 scss 설정

// nuxt.config.js
module.export = {
 modules: [
  '@nuxtjs/style-resources'
 ],
 styleResources: {
   scss: [
    '@/assets/scss/_function.scss'
   ]
 },
}