mixin 정의하기

mixin.scss

@mixin mixin-name { 
}

@mixin mixin-name($arg1, $arg2, ...){ 
}

mixin 사용하기

파일이름.scss

@include mixin-name;

@include mixin-name(val1, val2, ...)

@mixin jb { 
  p { 
    color: red;
  }
}

@include jb;

nuxt에서 사용하기

전역적으로 mixin을 사용하기 위해서
1. style-resources-module을 설치한다
2. nuxt.cofig.js
에서 styleResources, modules 부분에 아래와 같이 추가해준다

export default { 
  css: [ '~/assets/scss/_mixin.scss'],
  modules: ['@nuxtjs/style-resources'],
  styleResources: { 
    scss: ['~/assets/scss/_mixin.scss']
  }
}

Module build fail 에러 해결

출처

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

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'
		]
	},