nuxt.js 에서 sass/scss 사용하는 방법

nuxt.js 에서 scss 파일을 사용하려면 다음과 같은 방법을 통해서 사용할 수 있습니다.

node-sass , sass-loader 를 추가

npm,yarn 이용하여 node-sass, sass-loader 를 설치합니다.
저의 경우 sass-loader 설치(11.0.0)후 오류가 나서 버전을 다운그레이드 하여 다시 설치하였습니다.
제가 설치한 버전입니다. “node-sass”: “^5.0.0”, “sass-loader”: “^10.0.1”

using npm:

npm install --save-dev node-sass sass-loader

using yarn:

yarn add --dev node-sass sass-loader

nuxt.config.js 설정

nuxt.config.js 파일에서 css 에 추가할 scss 를 입력하고 해당 경로에 scss 파일을 추가하여 스타일을 적용하면 됩니다.

// nuxt.config.js
css: [
  '~assets/scss/app.scss'
],

@nuxtjs/style-resources 설치 및 셋팅

저의 겅우는 위의 셋팅만 하고 사용하는데 다른 분들은 다음과 같은 셋팅까지 사용해서 하는 분이 많은 거 같아서 설명합니다. 아래 @nuxtjs/style-resources를 설치하고 nuxt.config.js 에서 아래와 같이 설정해주시면 전역변수나 mixin 등을 사용할 수 있습니다.

npm install --save-dev @nuxtjs/style-resources

// nuxt.config.js
export default {
  css: ['~assets/scss/app.scss'],
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    less: '~/assets/scss/*.scss'
  }
}