Nuxt.js SCSS 사용

Nuxt.js에서 SCSS를 사용하는 방법이다. 

 

 

https://nuxtjs.org/docs/features/configuration/

Configuration

 

 

SASS Loader 설치

yarn add --dev sass sass-loader@10
npm install --save-dev sass sass-loader@10

 

 

nuxt.config.js 정의

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

 

 

추가)

 

SCSS에서 Variable을 사용하고 싶을 때가 있을 것이다. 그럴경우 추가 Module을 설치해야한다. 

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

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

 

Style Resource라는 모듈이다. 

 

yarn add -D @nuxtjs/style-resources

 

nuxt.config.js

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}