Sass の「The legacy JS API is deprecated」警告が Vite や webpack で消えない

要約

vite build や webpack のビルドで、次の警告が出続ける。

Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
More info: https://sass-lang.com/d/legacy-js-api

Sass の JavaScript API には、render() / renderSync() の旧 API と、1.45.0 で入った compile() / compileAsync() などの新 API がある。公式の説明（新しいタブで開く）↗のとおり、旧 API は 1.45.0 の時点で非推奨とされ、1.79.0 から呼ぶたびに警告が出るようになった。
2.0.0 で削除される予定だ。
自分のコードで呼んでいなくても、Vite や sass-loader が旧 API で Sass を呼んでいれば警告は出る。

解決策

1. Vite は api を切り替えるか 6 以降へ上げる

Vite 5.4 以降の 5 系なら、api で新 API に切り替えられる。

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: { api: "modern-compiler" }, // .sass ファイルなら sass キーにも同じ指定
    },
  },
};

"modern" でも新 API になる。
5.4 より前の Vite にはこの設定が無いので Vite 自体を上げる。
Vite 6 以降は既定で新 API になる。

2. sass-loader を上げる

npm install -D sass-loader@latest sass

options に api: "legacy" が書いてあれば外す。
旧 API 用の sassOptions（includePaths や outputStyle）は、新 API の名前（loadPaths や style）に直す。

3. 自作スクリプトは新 API に書き換える

const sass = require("sass");
 
// 旧 API: sass.renderSync({ file: "src/main.scss", includePaths: ["node_modules"], outputStyle: "compressed" })
const result = sass.compile("src/main.scss", {
  loadPaths: ["node_modules"],
  style: "compressed",
});
 
console.log(result.css); // 新 API では文字列（旧 API は Buffer）

文字列をコンパイルしていた data オプションの呼び出しは sass.compileString() に置き換える。
非同期の render() は、コールバックではなく Promise を返す compileAsync() / compileStringAsync() に置き換える。

4. 移行までの間だけ止める

sass.renderSync({
  file: "src/main.scss",
  silenceDeprecations: ["legacy-js-api"],
});

Vite 5 系なら、css.preprocessorOptions.scss に silenceDeprecations: ["legacy-js-api"] を入れても警告は止まる。
ただし 2.0.0 では旧 API そのものが無くなるので、ツールを更新するまでのつなぎにとどめる。

よくある原因

1. Vite 5 系を使っている: Vite 5 は既定で旧 API を使う。
   Vite 6 の移行ガイド（新しいタブで開く）↗にあるとおり、既定が新 API になったのは Vite 6 からで、Vite 7 では旧 API のサポート自体が削除された。
2. sass-loader が古い: webpack の sass-loader が新 API を既定にしたのは 16.0.0 から。
   15 以前、または設定で api: "legacy" を指定していると旧 API で呼ばれる。
   17.0.0 では旧 API のサポートが削除された。
3. 自作スクリプトの render(): 独自のビルドスクリプトで sass.render() / sass.renderSync() を直接呼んでいる。
4. フレームワークやプラグインが古い: Sass を内部で呼ぶツールが旧 API を使う版のままだと、設定では直せない。