42
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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.

42
30
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?