環境

node 14.17.3
nuxt 2.14.0
@nuxtjs/style-resources 1.2.0

node-sassからsassに切り替えた

今話題のDarsSassへの切り替え。

node-sassを使用していたのですが、これを機に自分のNuxt環境もsass（DartSass）に変更しようと思い、アップデートしました。

@useルールでめちゃくちゃ怒られる

sass-migratorを使って置き換えて、反応してくれなかった一部のscssファイルは、数も少なかったので手動で移行しました。

するとこんなエラーがターミナルにたくさん。

 ERROR  Failed to compile with 1 errors               friendly-errors 02:49:19


 ERROR  in ./assets/scss/global-styles/index.scss     friendly-errors 02:49:19

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: @use rules must be written before any other rules.
   ╷
18 │ @use '../functions';
   │ ^^^^^^^^^^^^^^^^^^^
   ╵
  assets/scss/global-styles/index.scss 18:1  root stylesheet

@useルールについて怒られているのですが、該当の箇所は特に変なところはありませんでした。

@nuxtjs/style-resourcesがエラーの原因だった

いろいろ調べて（数日〜一週間くらいは解決しませんでした・・）、どうやら@nuxtjs/style-resourcesが関係していることを突き止めました。

@nuxtjs/style-resourcesについてはnpmなどを見てもらうといいのですが、プロジェクト内にグローバルなSassの変数や関数を使えるようにするものです。

@nuxtjs/style-resources – npm

DartSassへの移行が進んでいないのか、@nuxtjs/style-resourcesがあまり使われていないのか、はたまたNuxtを使っているひと自体少ないのか・・ググってもなかなか解決策が出ず、ようやく見つけたひとつの記事が丁度同じ状況でタイムリーに世界の片隅で話題になっていました。

Unable to use Sass built-in modules – nuxt-community / style-resources-module

@nuxtjs/style-resourcesを使ってグローバルに読み込んだscssモジュール内で@useルールをうまく認識してくれない、という感じですね。

解決策

上記のissueの通りapp.scssというファイルを作成し、その中に関数やmixinなどの設定ファイルをimportしてnuxt.config.jsで読み込めば解決しました！

なお、ファイルパスやファイル名は環境に合わせて随時変更してください。

各関数などをラップするファイルを用意する

関数などstyleResourcesで読み込ませたいファイルをここでimportします。

@import './settings/functions';
@import './settings/mixins';
@import './settings/variables';

styleResourcesで読み込む

nuxt.config.jsで読み込みます。

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: ['~/assets/scss/app.scss'],
  },
}

これで設定は完了です。

あとは今まで通り各ページやコンポーネントでnode-sassのときのように書けるようになります。

最後に

とにかく一週間以上も悩まされて、Nuxtでどうやってsassを使えばいいんだって思ってたので解決して幸せです。

検索しても出てこなかったので、誰かの参考になれば幸いです。