Nuxt.js v2.4.0以上でnuxt-sass-resources-loaderを使ってはいけない

vueコンポーネントにグローバルなscssファイルを読み込ませる時にハマったのでメモ。
ここら辺のライブライが名前がどれも似かよっていてどれを使えないいかわからない方も多いと思います。

結論

style-resources-moduleを使いましょう。
https://github.com/nuxt-community/style-resources-module

手順は以前とほぼ変わりません。

yarn add -D @nuxtjs/style-resources

nuxt.config.js

  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/style-resources', //　追記します
  ],

  styleResources: {
    sass: [
      '~/assets/scss/variable.scss' // 読みませたいscssファイルを指定します。
    ]
  },

#ちなみに
issueを見ると、
Nuxt.js v2.4.0にバージョンアップされた際に、nuxt-sass-resources-loaderはサポート終了になったとのこと。
v2.4.0になったのは今年の1月29日なので、それ以前の記事は参考にしないほうがよさそう。

⚠️ We are closing the support for this package and transferred to the official community package. So we strongly suggest that you use the official community package @nuxtjs/style-resources.