🫣
Nuxt2系でDeprecation Warning: The legacy JS API is deprecatedを抑止する

2025/05/30に公開
node-sassからDart Sassに移行するにあたって、検索してもピンポイントでなかったので残します。
そもそもNuxt使うなら3にあげるべきってのは、分かってるんです。。。。
node-sass→Dart Sassへの移行にあたっての作業は色々他に記事が出てるのでそちらを参考してもらえればと思います

その中で今回対応したのは以下

@import→@useへの移行やそれに伴うvariablesの修正
置換で対応

mixed-decls対応（は、こちら参考
泥臭くワーニングごとに対応

https://qiita.com/sygnas/items/13d89d0a3dd1cec86d99
除算のsass:math対応
等々です。
上記作業はスムーズに行えたのですが、ビルド時のDeprecation Warning: The legacy JS API is deprecatedの解消に手間取りました。

Nuxt2系はバンドラが基本webpackのところ、ぐぐってもviteでの設定（Nuxt3のデフォルトのバンドラ）に関する記事しか出てこず、webpackはwebpack単体で設定が出てくるものの、それをnuxt.config.jsでどう表したものかまで見つけられず、この記事を残すものです。
Nuxt3での対応方法はこちら

https://zenn.dev/levtech/articles/1174c95ef81cbb

 バージョンNuxt 2.17.1
sass 1.87.0

 対応方法SassのドキュメントからWebpackへのドキュメントへは参照されていたのですが、こちらをベースにnuxt.config.tsを修正してもダメでした。というのも、NuxtConfigの型定義的にapiオプションが存在しなさそう。。。
https://webpack.js.org/loaders/sass-loader/#api
sassOpetions配下にsilenceDeprecationsを定義可能そうだったので、最終的にはNuxt3系(vite系)でも取られていた抑制の方法でDeprecation Warning: The legacy JS API is deprecatedを抑制できました。
nuxt.config.ts
const config: NuxtConfig = {
  build: {
    loadingScreen: false,
    loaders: {
      scss: {
        implementation: require('sass'),
        sassOptions: {
          silenceDeprecations: ["legacy-js-api"]
        }
      }
    }
  }
}
バージョン

対応方法

Discussion
