Dart Sass のエラーを修正したい

発生した問題

ReactのプロジェクトにSCSSを入れて開発していたところ、ローカル環境でのビルド時に以下のようなエラーが発生しました。

Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

調べたところ、どうやら
「Legacy JS APIの@importはもう古いので、@useを使って！」
とのこと。

@importは、他のSassファイルからミックスイン、関数、変数などを参照できるようにする機能なのですが、2022年にサポートが終了しました。代わりに、@useを使うよう公式からアナウンスされています。

ただ、私の場合はビルドした後のファイルに@importが使われている状況だったため、手をつけようにもどうすれば修正できるのかがわからない状況でした。

解決策

Viteを使っていたこともあり、vite.config.js（.ts）に以下の設定を追加することで解決しました。

vite.confg.js

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler' // これを追加
      }
    },
  },
})

Sassを使っている場合はscss部分をsass、api: 'modern-compiler'部分をapi: 'modern'にも変更できます。

Vite(バージョン5.xの場合)はデフォルトでAPIをlegacyに設定するので、上記のように明示的に設定してあげる必要があるそうです。

sass/scss - top level option api: "legacy" | "modern" | "modern-compiler" (default "legacy") allows switching which sass API to use. For the best performance, it's recommended to use api: "modern-compiler" with sass-embedded package. Options (legacy), Options (modern).

また、私の場合はViteのバージョン5.xでしたが、6.xではmodern-compilerがデフォルトに設定されるようになっています。
（7.xではlegacy自体が削除されているようです）

Select the sass API to use with api: "modern-compiler" | "modern" | "legacy" (default "modern-compiler" if sass-embedded is installed, otherwise "modern"). For the best performance, it's recommended to use api: "modern-compiler" with the sass-embedded package. The "legacy" API is deprecated and will be removed in Vite 7.

可能なら7.x以上、最新版に上げたいところですね。

参考

以下参考にさせていただいた記事です。
ありがとうございました。