Nuxt에서 Global로 scss의 변수($)나 @mixin을 설정하기

개요

css옵션 안에 scss파일의 설정은 가능하지만 컴포넌트 안에서 변수라던가 mixin을 사용하게 되면 정의가 안 되면 에러가 발생해서

글로벌하게 사용할 수 있는 변수나 mixin을 Vue 컴포넌트 파일 내의 style로 사용할 수 있도록 하는 방법을 찾아보았다.

 

 

1. nuxt-community/style-resources-module

밑의 모듈을 설치해주자. 이것저것 필요한 패키지들이 있으니 링크참조

https://github.com/nuxt-community/style-resources-module

GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements!

 

2. nuxt.config.js 에서 설정해주기

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: ['./assets/scss/index.scss']
  }
}

 

끝

 

참조

 

assets/scss/index.scss

@import './mixin.scss';
@import './variable.scss';

 

assets/scss/mixin.scss

@mixin pc_view {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

@mixin tb_view {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@mixin sp_view {
  @media screen and (max-width: 767px) {
    @content;
  }
}

assets/scss/variable.scss

$font_size_huge: 32px;
$font_size_big: 24px;
$font_size_large: 20px;
$font_size_medium: 16px;
$font_size_small: 14px;
$font_size_tiny: 12px;
$font_size_default_pc: 16px;
$font_size_default_sp: 14px;