Next 15 update throws deprecation warning in console using sass

[pierre-isb]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/dark-architecture-go8s7s

To Reproduce

1. install sass (yarn add -D sass)
2. import styles from a SCSS module file
3. Update Next to v15.0.0

Current vs. Expected behavior

A deprecation warning appears from sass : "Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0".
Is the deprecation related to a Next.js deprecated use of .scss modules that will be fixed ? Or does that mean that scss modules is deprecated in Next.js ?

Provide environment information

Operating System:
 Platform: macOS
 Version: 14.7
Binaries:
 Node: 22.10.0
 yarn: 1.22.19
Packages:
 next: 15.0.0
 sass: 1.80.1
Next.js Config:
 reactStrictMode: true,
 images: {
  unoptimized: true
 }

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[jadenv]

We started getting this warning today too when trying out Next 15.

Looks like PR #70067 updated sass-loader to a version that is new enough to throw the deprecation warning, but didn't fully upgrade to v16 that would default to the modern Sass JS API.

I believe next updating sass-loader to v16+ would fix this. Our projects seem to work fine locally with the modern-compiler option turned on.

[Netail]

The SASS team even mentioned this already themself; #67931

[alfarodarwaynejay]

Hello, is there any way to just suppress the warning for the meantime?

[pierre-isb]

@alfarodarwaynejay I believe you can use next config if you want to silence these warnings :

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

cf. https://nextjs.org/docs/app/building-your-application/styling/sass and https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#silencing-warnings

[controversial]

@JosipPardon This is unrelated to this issue

[controversial]

@emdagon That article is also about an unrelated deprecation

This issue is about Next’s webpack config loading the “legacy JS API” instead of the “modern JS API”

[feedthejim]

Hey, thanks for opening the issue. I'm considering:

• introducing an experimental option to use the upgraded sass
• silence the warning

We won't be able to upgrade it by default since it would require yet another major. Does that sound like a good compromise?

[Eigilak]

Yeaaah buddy

[tr1s]

@feedthejim what are the implications of using an "experimental option to use the upgraded sass" vs "upgrade it by default"?

[controversial]

@tr1s an experimental option will allow people to opt-in to the new Sass API, which may require users to update their sassOptions at the same time

Upgrading it by default would require everyone to update their sassOptions, and might break their builds before they do so—so “upgrade it by default” would be a breaking change that can only be made in a semver-major release

[pierre-isb]

@feedthejim love the idea, thanks 🙏

[andreynovikov]

This is my temporary solution:

1. Install sass-loader
2. Modify next.config.js:

/**
 * Webpack config modification adopted from https://github.com/vercel/next.js/issues/11629
 */
const regexEqual = (x, y) => {
    return (
        x instanceof RegExp &&
        y instanceof RegExp &&
        x.source === y.source &&
        x.global === y.global &&
        x.ignoreCase === y.ignoreCase &&
        x.multiline === y.multiline
    )
}

module.exports = {
    webpack: config => {
        const oneOf = config.module.rules.find(
            rule => typeof rule.oneOf === 'object'
        )

        if (oneOf) {
            const sassRule = oneOf.oneOf.find(rule => regexEqual(rule.test, /\.module\.(scss|sass)$/))
            if (sassRule) {
                const sassLoader = sassRule.use.find(
                    el => el.loader.includes('next/dist/compiled/sass-loader')
                )
                if (sassLoader) {
                    sassLoader.loader = 'sass-loader'
                }
            }
        }

        return config
    }
}

Important! This is not compatible with Turbopack, I'm not using it.

[wslp12]

This is my temporary solution:

1. Install sass-loader
2. Modify next.config.js:

/**
 * Webpack config modification adopted from https://github.com/vercel/next.js/issues/11629
 */
const regexEqual = (x, y) => {
    return (
        x instanceof RegExp &&
        y instanceof RegExp &&
        x.source === y.source &&
        x.global === y.global &&
        x.ignoreCase === y.ignoreCase &&
        x.multiline === y.multiline
    )
}

module.exports = {
    webpack: config => {
        const oneOf = config.module.rules.find(
            rule => typeof rule.oneOf === 'object'
        )

        if (oneOf) {
            const sassRule = oneOf.oneOf.find(rule => regexEqual(rule.test, /\.module\.(scss|sass)$/))
            if (sassRule) {
                const sassLoader = sassRule.use.find(
                    el => el.loader.includes('next/dist/compiled/sass-loader')
                )
                if (sassLoader) {
                    sassLoader.loader = 'sass-loader'
                }
            }
        }

        return config
    }
}

Important! This is not compatible with Turbopack, I'm not using it.

thank but my case not work
sass options - prependData @use "src/styles/shome"; <- can't find stylesheet to import.

[Maclay74]

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.

[hormesiel]

@alfarodarwaynejay I believe you can use next config if you want to silence these warnings :

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

cf. https://nextjs.org/docs/app/building-your-application/styling/sass and https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#silencing-warnings

If, like me, you did this but the warnings keep getting printed out when running next dev, remove the .next directory and it'll fix it.

[andreynovikov]

I have installed sass-loader and created the following next.config: https://github.com/andreynovikov/galleria-js/blob/13db458e368757c68eca40bb3163f1354c3ffeb1/next.config.mjs#L39-L57