NextJS + Sass で SassWarning: Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. という警告が出た時の対応

最終更新日:

SassWarning: Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. という警告が出た。時の対応。

環境

  • NextJS 15.0.2
  • Sass 1.82.0

一応エラーではない

公式 には下記のように書いてある。

Dart Sass originally used an API based on the one used by Node Sass, but replaced it with a new, modern API in Dart Sass 1.45.0. The legacy JS API is now deprecated and will be removed in Dart Sass 2.0.0.

Dart Sass 1.45.0 の時点でモダンな API に書きかえていて、
Dart Sass 2.0.0 には、今 deprecated 扱いにしてる古い API は削除されるだろう。
と。多分。

エラーじゃないのだけど、
コンパイルする度に表示されるのはけっこうつらい。

Dart Sass

警告を出してる原因は、おそらくこの部分だろうなと思う箇所。
公式（github）には下記のように書いてある。

const sass = require('sass');

const result = sass.compile(scssFilename);

// OR

// Note that `compileAsync()` is substantially slower than `compile()`.
const result = await sass.compileAsync(scssFilename);

ので、

// layout.tsx
import "./globals.scss"

上記部分を下記のようにした。
が、エラーが出た。

// The export default was not found in module [project]/node_modules/sass/sass.default.js [app-client] (ecmascript).
import sass from "sass"
// ./globals.scss: no such file or directory
const styles = sass.compile("./globals.scss")

下記に修正したものの、
今度は sass 側でエラーが出た。

import * as sass from "sass"
const styles = sass.compile("src/styles/globals.scss")

// globals.scss のエラー
Error: Can't find stylesheet to import.
  ╷
2 │ @use "@/styles/mixins" as comp;

globals.scss

下記全てエラー。

// エラー
@use "src/styles/mixins" as comp;

// エラー
@use "/src/styles/mixins" as comp;

下記に修正してようやくエラーが解消した。

@use "../styles/furikake" as comp;

"use client" 環境下では compile() は使えない。

また問題が発生した。
"use client" 環境下では compile() は使えない。

"use client"

import * as sass from "sass"

// Error: The compile() method is only available in Node.js.
const styles = sass.compile("./styles.module.scss")

Github の issues にて

Warning を解消するのではなく、
そもそもこの Warning を出さない方法を提示してる人がいた。
この問題が次のバージョンで解決する事を信じてみたいな事が書いてあった。

next.config.ts

import type { NextConfig } from "next"

const nextConfig: NextConfig = {
	sassOptions: {
		silenceDeprecations: ["legacy-js-api"],
	},
}

export default nextConfig

おまけ：@use 相対パス問題

これも書いてあった。

sass options - prependData @use "src/styles/shome"; ← can't find stylesheet to import.

I have the same problem, @import works, whereas @use throws this error using both Turbopack and webpack.

@import 使ったら動いたと。
そもそも @import もレガシーな書き方な気が。

おまけ：modern-compiler

コンパイルが速くなる？
モダン API のみを使いたい時？
NextJS ？ではまだ動かないらしい。

書き方も下記で合ってるかわからない。

import type { NextConfig } from "next"

const nextConfig: NextConfig = {
	sassOptions: {
		api: "modern-compiler",
	},
}

export default nextConfig

この Warning 問題に対して

  • next.config.ts で表示させないようにする。
  • css には書きかえない。様子見。