Nuxtプロジェクトで 「DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0」 が大量にでてきたのでやったことのメモ

概要

• Nuxt起動しているときに気がついたが、DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0が大量にログで流れるようになった
• sassのバージョンをあげたことによる影響らしい
• これを修正したのでメモする

各種バージョン

• nuxt@3.14.1592
• sass@1.81.0

原因

参考URLたちを読み漁る

https://sass-lang.com/documentation/breaking-changes/legacy-js-api/
https://github.com/nuxt/nuxt/issues/30007
https://qiita.com/bearl27/items/88754480880acf45a3b3
https://zenn.dev/levtech/articles/1174c95ef81cbb

• sass@1.69.5にダウングレードしたら、表示はされなくなるが、2.0.0で使えなくなるAPI利用しているので、はやくなんとかしろとのこと
• これにより、エラー出力が大量にでてきて、Nuxtの開発サーバ起動が遅くなり困った

やったこと

nuxt.config.ts の vite -> css -> preprocessorOptions -> scss -> api を追加

modern-compiler を選択すると、Dartで開発されたAPIを利用するようになるので、高速になるとのことだけど、今回は移管先がそれなので、それでトランスパイルするように固定する

nuxt.config.ts

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: "modern-compiler", // 追加
          // ...

@imoprtでインポートしている箇所を@useに変更する

@importはだいぶ前に非推奨になっているとのこと。まじか（全然知らなかった）

というわけで修正する

@use './font';

namespaceを作りたい場合は、こうすると良い

@use './font' as font;

body {
  font-size: font.$font-size; /** こうやって指定する */
}

nuxt.config.ts -> @/assets/index.scss -> 各種scss をロードするようにしてたが、それをやめる

当初こういう作りにしていた

nuxt.config.ts

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/index.scss" as *;'
          // ...

./assets/index.scss

@import './base';
@import './layout';
@import './color';
@import './font';

じゃあこうすればいいよねってことで下記にしたが、Componentのstyleから定義されていないエラーがめっちゃでたので、認識されていないようでした

./assets/index.scss

@use './base' as *;
@use './layout' as *;
@use './color' as *;
@use './font' as *;

よくわからず、タイムアップしたので、色々試行錯誤してやったのがこれ

nuxt.config.ts

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "~/assets/color" as *;
            @use "~/assets/base" as *;
            @use "~/assets/layout" as *;
            @use "~/assets/font" as *;
          `,
        // ...

./assets/index.scss は削除した。これでうまく反映はされたが原因はまだわかっていない（確認中）

その他

使えなくなっている関数（？）とかあったので、ちまちま修正した。darkenをcolor.adjustにするなど

雑感

とりあえず修正できたよかった