nuxt에 scss설치

nuxt에 scss 설치

nuxt.js에서 scss파일을 사용하려면 다음과 같은 방법을 통해서 사용할 수 있다.

node-sass, sass-loader 추가

• npm을 이용해서 설치 node-sass와 sass-loader를 설치

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

nuxt.config.js 설정

nuxt.config.js파일에서 css에 추가할 scss를 입력하고 해당 경로에 scss파일을 추가하여 스타일을 적용하면 된다.

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

@nuxtjs/style-resources 설치 및 셋팅

@nuxtjs/style-resources를 설치하고 nuxt.config.js에서 아래와 같이 설정해주면 전역변수나 mixin등을 사용할 수 있다.

npm install --save-dev @nuxtjs/style-resources

// nuxt.config.js
export default {
  css: ['~assets/scss/app.scss'],
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    less: '~/assets/scss/*.scss'
  }
}

설치 오류 해결

설명에 맞게 설치를 진행했는데 아래와 같은 에러가 발생했다.

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

TypeError: this.getOptions is not a function

찾아보니 위와 같은 에러는 sass-loader 11.0.0 버전과 호환이 되지않아 발생하는 문제

// 기존 모듈 삭제
$ npm uninstall sass-loader

// 10번대 버전 설치
$ npm install --save sass-loader@10

따라서 기존 sass-loader를 uninstall해주고 10버전을 설치했더니 해결됐다.

전역 설정

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

출처

• nuxt.js 에서 sass/scss 사용하는 방법
• TypeError: this.getOptions is not a function 에러 해결법
• vue Global SCSS 설정