Nuxtjs에서 scss 전역변수 사용하는 방법 (How to use Scss variables, mixins & functions globally in Nuxt.js)

Nuxtjs와 Scss를 같이 활용하다보면 글로벌 변수와 믹스인을 사용해야될 상황이 오게 됩니다.

@nuxtjs/style-resources 라이브러리를 활용하면 이 분을 굉장히 쿨하게 해결할 수 있습니다. 아래는 @nuxtjs/style-resources를 활용해서 Scss 글로벌 변수와 믹스인을 처리하는 방법입니다.

 

yarn add --dev @nuxtjs/style-resources sass-loader node-sass

// nuxt.config.js
export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      '~/assets/vars/*.scss',
      '~/assets/abstracts/_mixins.scss'
      ]
  }
}