featuredImg

Sass legacy-js-API対応、Gatsbyの場合

gatsby-config.jsへオプションを加筆

2025/05/26 2 minute read

Gatsby Developで作業しながら、警鐘コメントがiTermにたびたび流れてうるさかったが、長らく放置していた。

Deprecation Warningが出る理由は、 Nuxtで Deprecation Warning: The legacy JS API is deprecated が発生したら というZennの投稿が非常にわかりやすかった。

引用させていただくと

  • 元々はNode SassベースのAPIが存在した(legacy API)
  • 1.45.0から新しいAPIが誕生(new, modern API)
  • legacy APIは2.0.0で廃止予定
  • 1.79.0からlegacy APIを使っている場合に警告を出すようになった

要はビルドツールがGatsby、Nuxt、Viteだといった種別は関係なくnode_modulesSass
node_modules/sass/sass.dart.jsに
廃止する予定の"legacy-js-api"だと書いてあり

B.Deprecation_F8y = new A.Deprecation0("legacy-js-api", "1.79.0", "Legacy JS API.", "legacyJsApi");
B.Deprecation_fsU = new A.Deprecation("legacy-js-api", "1.79.0", "legacyJsApi");

node_modules/sass/types/deprecations.d.ts には警告文が載っていた。

All of the deprecation types currently used by Sass.

(Sass で現在使用されているすべての非推奨タイプ。) ー がいつから警告だすか列挙してあった。

/**
   * Deprecation for legacy JS API.
   *
   * This deprecation became active in Dart Sass 1.79.0.
   */
  'legacy-js-api': Deprecation<'legacy-js-api'>;

  /**
   * Deprecation for @import rules.
   *
   * This deprecation became active in Dart Sass 1.80.0.
   */
  import: Deprecation<'import'>;

ここまではVS Codeで検索して見つかったが、なぜ警告文の対象になっているのかが ?? だったのが、
先のZennの投稿で (おぉ。なるほど) と理解+納得できたので、あとは対処。


gatsby-config.js に sassOptions: を追加

gatsby-config.js
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        sassOptions: {
          api: "modern",
          silenceDeprecations: ['legacy-js-api'],
        },
      },
    },

Gatsbyさん、日本語文書は充実してないけども。
英語圏のディスカッションはわかりやすい。

GitHub の Discussionsからマルっとコピー。

DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
訳:/ 非推奨の警告: レガシー JS API は非推奨であり、Dart Sass 2.0.0 で削除されます。

sassOptions:には、modern APIを使う,

api: "modern",

と 非推奨の警告には沈黙してもらう, の2行を書いて解決。

silenceDeprecations: ['legacy-js-api'],