Saas(scss)でLegacy JS APIによるエラーが起きた(；；)→解決方法

はじめに

Sassを使っていた時に以下のようなエラー文がでてsassのスタイリングが反映されない状態に陥りました。このようなときの解決方法を共有しようと思います。

 ⚠ ./src/styles/globals.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/globals.scss
Deprecation 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

<省略>

./src/feature/menubar/components/search.module.scss
Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

<省略>

Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

<省略>

問題

1. Legacy JS APIの非推奨警告

Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Dart Sassの古いJavaScript APIが使用されている
Sass 2.0.0で完全に削除されたの機能を使用している

解決策

安定版のsass@1.69.5にダウングレードする

• npmの場合

  npm uninstall sass
  npm install sass@1.69.5
  

• yarnの場合

  yarn remove sass
  yarn add sass@1.69.5
  

• pnpmの場合

  pnpm remove sass
  pnpm add sass@1.69.5
  

誰かと共同開発する時は環境については念入りに話し合っておこう

2. ネストルールの後の宣言に関する警告

Sass's behavior for declarations that appear after nested rules will be changing

Sassのネストされたルールの後に宣言が書かれている
この書き方は将来的なCSSの仕様変更により動作が変わる

修正方法

1. 宣言をネストルールの前に移動する
2. 宣言を& {}でラップする

// 問題のあるコード
.container {
  .nested {
    color: red;
  }
  background: white; // ← この位置が問題
}

// 修正方法1: 宣言を前に移動
.container {
  background: white;
  .nested {
    color: red;
  }
}

// 修正方法2: & {}でラップ
.container {
  .nested {
    color: red;
  }
  & {
    background: white;
  }
}

自分でコード見てがそんなことがなかったので①がおかしかったら警告が出ることがある？？

最後に

今回はわたしにエラーが起き、これを治すために長時間かかってしまったので、とりあえずの応急処置としての解決方法を共有しました。少しでも多くの人がエラーで困ることがないことを願っています。
それではみなさん、良いエンジニアライフを〜👋

お願い

今回は自分が調べた中では、いちばん簡単にできる解決方法としてバージョンを下げることをしました。しかし，これは根本的な解決方法ではないと思います。もし知っている方がいらっしゃいましたら、なにが影響でJSAPILegacyエラーが起きたのか，どうすれば確認でき、事前に対策できるのか等、コメントにて教えていただけると幸いです。

参考

• Sassの記事

• Viteでの解決方法らしい