Nuxt.jsでSassの変数やMixinsを管理する（resources-loader）

10/31追記

node-sass-glob-importerを使用すると記載していましたが、nuxt-sass-resources-loaderのみで同等のことが可能だったため書き直しました。

Sassの変数やMixinsを使う

Nuxt.jsでは nuxt-sass-resources-loader を使うことで、変数やMixinsなどを各コンポーネントで使えるようになります。

nuxt-sass-resources-loader

{
  modules: [
    ['node-sass-resources-loader', '@/assets/styles/resources.sass']
  ]
}

@/assets/styles/resources.sass

=button($width: auto, $height: auto)
  width: $width
  height: $height
  color: #333
  border: 1px solid #ccc

  &:disabled
    background: #ccc

@/pages/login.vue

<style lang="sass" scoped>
.submit
  +button(320px, 60px)
</style>

Globを使ってファイルを指定する

nuxt-sass-resources-loaderではGlobを使ってファイルを指定することもできます。

nuxt.config.js

{
  modules: [
    ['nuxt-sass-resources-loader', '@/assets/styles/resources/**/*.sass']
  ]
}

これで、styles/resources以下のすべてのSassファイルを使用できるようになります。

読み込む順序を指定する

変数など、読み込む順番を気にしなければならない場合は、配列で指定します。

nuxt.config.js

{
  modules: [
    ['nuxt-sass-resources-loader', [
      '@/assets/styles/variables/**/*.sass',
      '@/assets/styles/utilities/**/*.sass',
      '@/assets/styles/components/**/*.sass'
    ]
  ]
}

Links

• nuxt-sass-resources-loader