Next 15 + Sass deprecation warning: why it appears and how to fix it cleanly

Upgrading to Next.js 15 can suddenly flood your console with a Sass deprecation warning even though your SCSS modules still compile correctly. The app works, but the warning is noisy, confusing, and usually points to an underlying change in how the Sass compiler is being invoked through the modern toolchain.

In most cases, this issue happens because Next 15 pulls your Sass setup into a newer compilation path while your project is still using defaults that trigger warnings from the legacy Sass JavaScript API. The warning often comes from the interaction between Next.js, webpack tooling, and the sass package rather than from your SCSS syntax itself.

Understanding the Root Cause

The key detail is that the warning is usually not caused by invalid SCSS. Instead, it is caused by a deprecated Sass API being used somewhere in the build pipeline.

When you install sass and import an .scss module in a Next 15 app, Next delegates stylesheet compilation to its internal bundler configuration. Depending on the exact version combination of next, sass, and the loader stack, Sass may emit a warning similar to the one about the legacy JS API being deprecated.

Technically, here is what is happening:

• Dart Sass has deprecated its older JavaScript API.
• Some build integrations historically relied on that older API.
• Next.js 15 updates other parts of the toolchain, making the warning more visible during development.
• Your SCSS module import triggers Sass compilation, which exposes the warning in the terminal or browser console.

So the real problem is not usually your component code. It is a version compatibility issue or a temporary framework-level integration gap between Next 15 and the installed sass package.

Step-by-Step Solution

The safest fix is to make sure your dependencies are aligned to the newest compatible versions first, then verify whether the warning is coming from your own config or from a framework dependency.

1. Update Next.js and Sass to the latest compatible versions

First, upgrade both packages. Many of these warnings are resolved in patch releases.

yarn add next@latest react@latest react-dom@latest sass@latest

If you use npm:

npm install next@latest react@latest react-dom@latest sass@latest

2. Remove lockfile drift and reinstall dependencies

If the warning persists, your lockfile may still be pinning an older transitive dependency.

rm -rf node_modules .next yarn.lock package-lock.json pnpm-lock.yaml
yarn install

Then restart the dev server:

yarn dev

3. Verify your SCSS import is standard

Use the normal CSS Module pattern:

// app/page.tsx or a component
import styles from './page.module.scss'

export default function Page() {
  return <div className={styles.wrapper}>Hello</div>
}

And your SCSS file:

.wrapper {
  color: rebeccapurple;
}

If your styles compile and only the warning remains, that strongly suggests the issue is in the toolchain rather than in your stylesheet source.

4. Check whether you are using custom webpack or Sass configuration

If you added custom build logic in next.config.js or next.config.mjs, review it carefully. Older loader customizations can force deprecated behavior.

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    // keep this minimal unless absolutely necessary
  },
}

module.exports = nextConfig

If you previously customized sass-loader, remove that customization and let Next manage Sass internally.

5. Avoid forcing legacy Sass integrations

If your project directly depends on older style tooling, update it. For example, if you manually added loader packages in an older setup, they may conflict with Next 15.

yarn why sass
yarn why sass-loader

If sass-loader appears as a manually installed dependency in a standard Next app, consider removing it unless you truly need a custom webpack pipeline.

yarn remove sass-loader node-sass

node-sass should not be used in modern Next.js apps.

6. Confirm whether this is a known framework issue

The linked reproduction shows the warning appears with a minimal setup: install sass, import an SCSS module, and run the app. When a warning occurs in such a small reproduction, that is a strong sign of a framework integration issue rather than an application bug.

In that case, the practical resolution is:

• stay on the latest Next 15 patch release,
• stay on the latest sass release,
• avoid unnecessary custom Sass tooling,
• monitor the upstream fix in the relevant issue tracker.

7. Temporary mitigation if you cannot remove the warning immediately

If the warning is harmless and blocked on an upstream fix, do not rewrite working SCSS modules. Instead:

• keep dependencies updated,
• document the warning for your team,
• avoid adding brittle suppression hacks,
• upgrade again when a fix lands.

That is usually better than introducing unsupported workarounds that will break in future Next releases.

Common Edge Cases

1. The warning mentions legacy JS API even after upgrading

This usually means a transitive dependency is still using the deprecated Sass API. Run dependency inspection commands and look for stale packages.

npm ls sass
npm ls sass-loader

If a third-party package is pulling in an older loader path, the warning may remain until that package updates.

2. You are using node-sass or migrated from an older Next version

Older projects sometimes carry forward obsolete Sass-related packages. Modern Next.js expects sass based on Dart Sass. Remove node-sass entirely.

3. The warning only appears in development

That is common. Development mode tends to surface deprecation warnings more aggressively, while production builds may still succeed. Even so, treat the warning as a signal that your toolchain should be updated.

4. Turbopack versus webpack behavior differs

If you are testing experimental build modes, the warning may appear in one path and not the other. That does not always mean one is correct; it can simply mean the compiler integration differs.

5. Monorepo setups can pin mismatched Sass versions

In a workspace, one package may resolve a different sass version than another. Make sure the app using Next 15 resolves a single modern Sass version.

yarn workspaces info

Then inspect the resolved dependency graph carefully.

FAQ

Does this warning mean my SCSS code is broken?

No. In this issue, the warning is usually about the Sass compiler API used by the build pipeline, not about invalid SCSS syntax in your module file.

Should I remove Sass and switch to plain CSS?

Not necessarily. If your team relies on SCSS modules, the better approach is to update Next.js and Sass and wait for any upstream integration fixes rather than removing Sass because of a warning alone.

Can I suppress the warning safely?

Usually, no clean long-term suppression is recommended unless the framework explicitly documents one. The best fix is to upgrade dependencies and avoid custom legacy loader configuration.

Recommended fix summary

If you want the shortest path to resolution, do this:

1. Upgrade next and sass to the latest versions.
2. Delete node_modules and your lockfile, then reinstall.
3. Remove any custom sass-loader or legacy webpack Sass setup.
4. Keep using normal SCSS modules.
5. If the warning still appears in a minimal reproduction, treat it as an upstream Next 15 Sass integration issue and track the patch release.

For reproduction details, refer to the minimal sandbox example. If your project matches that setup, the warning is very likely environmental rather than caused by application logic.