Astro v4で.scssをコンパイルしたときにDeprecation [legacy-js-api]が出るので対処する。

Astro 4.15.9でSass (.scss) を含むサイトをビルドしたら警告が出てきました。

Deprecation [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のバージョンも1.79.3に上げたのでその影響のようです。infoにあるURLの中身を読んでみます。

• Sass: Breaking Change: Legacy JS API

Vite still defaults to the legacy API, but you can similarly switch it by setting api to “modern” or “modern-compiler”. See Vite’s documentation for more details.

SassのLegacy JS APIが廃止されるけど、Astroが呼び出しているViteはそのAPIを使っているので警告が出ているようです。Viteの対応方針を調べてみます。

• Sass Deprecation Warning when building Vue project with Vite · Issue #18164 · vitejs/vite
• feat(css)!: change default sass api to modern/modern-compiler by hi-ogawa · Pull Request #17937 · vitejs/vite

First one is a breaking change for Vite users relying on custom options https://vitejs.dev/config/shared-options.html#css-preprocessoroptions so #17937 will be included in Vite 6 release.

それはそう。

この記事を書いている段階では、Vite v5に対してデフォルトでmodern APIを使う修正はされないようです。自分でastro.config.mjsに設定を追加して対応します。Viteのドキュメントではsass-embeddedを推奨しているので、ついでに乗り換えます。

sass から sass-embedded への乗り換え

pnpm uninstall sass
pnpm install -D sass-embedded

astro.config.mjsの修正

以下を追加します。

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: "modern-compiler",
        },
      },
    },
  },

警告が消えました。

コンパイル対象の.scssを書いたのは私ではないので偉そうなことを言うのは恐縮なのですが、大したことしてないのでコンパイル速度は全然変わらないです。違いが全くわからねえ～～～。

話は逸れてしまうのですが、警告を消す過程でSassの中身を見ていたら、Dart Sassで廃止予定の@importが使われていたので@useに移行しました。正直なところ相当な大規模開発じゃない限り全然メリットがないと感じたので、@importは廃止しないでほしいです。作業していてつらかったです。