2019년 1월 30일 오전 10시 08분 추기: nuxt-sass-resorces-loader 에서 공식적으로 더 이상 서포트를 하지 않으니 @nuxtjs/style-resources 를 사용하라는 발표가 있었습니다.

컴포넌트 단위로 개발이 진행되는 SPA 라도 SASS나 SCSS를 쓰다보면 전역에서 로드해야 할 파일이 생기게 마련입니다. 예를들면 변수를 정의해 놓은 스타일시트나 Mixin, Function 을 정의해 놓은 것들 말이죠. nuxt.config.js 설정에서 css 부분에 파일을 추가하면 모든 컴포넌트에서 해당 스타일시트를 로드하긴 하지만 변수나 Mixin은 불러오지 못합니다. 그래서 사용하고 있던 것이 nuxt-sass-resources-loader 라는 모듈이었습니다.

Nuxt 버전업

어제 Nuxt.js 가 2.4.0으로 업데이트 되었습니다. 새로운 프로젝트를 시작할 일이 있어서 부트스트래핑을 하는데, 분명 어제 테스트를 할때까지는 잘 되면 nuxt-sass-resources-loader 모듈이 아예 동작을 하지 않는 이슈가 발생했습니다. Github 에 이슈를 열어보니 2.4.0에서 모듈이 동작하지 않는다는 따끈따끈한 이슈가 올라와 있었습니다.

해결

안되는 건 어쩔 수 없죠. 버전을 낮추는 방법도 있었습니다만 일단 다른 모듈을 쓰기로 했습니다. 검색을 해보니 @nuxtjs/style-resources 라는 것이 있네요. 이름을 봐서는 이쪽이 공식모듈인 것 같습니다. 어째됐건 저 녀석을 적용하니 정상적으로 잘 동작하고 있습니다. 사용법은 다음과 같습니다.

# 설치하기
> yarn add @nuxtjs/style-resources -D

# 또는
> npm install @nuxtjs/style-resources --save-dev

// nuxt.config.js

module.exports = {
  // ...
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    sass: [
      '@/assets/styles/common.scss'
    ]
  },
  // ...
}

nuxt-sass-resources-loader 보다 설정부의 코드가 훨씬 깔끔하고 SASS, SCSS 이외에도 다른 전처리기도 지원하는 것 같습니다. 진작에 이걸 쓸 걸 그랬어요.