Nuxt에 Scss 설치하기

Nuxt에 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'
	]
}

설치 오류

위와 같이 설치했는데, 아래와 같은 에러가 발생한다?

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 sass-loader@10

 

그리고 package.json에서 버전 10이상으로 설정해주자

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

전역 scss로 설정

module.exports 안에 셋팅을 해주면 nuxt페이지 전역에 적용된다

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