sassOptions additionalData not working as expected - "Can't find stylesheet to import."

[qjstuart]

Link to the code that reproduces this issue

https://github.com/qjstuart/nextjs-sass-issue

To Reproduce

1. Start the applicaiton npm run dev
2. You should be faced with the following error:

## Error Type
Build Error

## Error Message
Error evaluating Node.js code

## Build Output
./ui/TestComponent.module.scss
Error evaluating Node.js code
Error: Can't find stylesheet to import.
  ╷
1 │ @use "variables" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^
  ╵
  ui/TestComponent.module.scss 1:1  root stylesheet
Caused by: Error: Can't find stylesheet to import.
  ╷
1 │ @use "variables" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^
  ╵
  ui/TestComponent.module.scss 1:1  root stylesheet
    [at Object.wrapException (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:2292:47)]
    [at /Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:87606:25]
    [at _wrapJsFunctionForAsync_closure.$protected (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:4960:15)]
    [at _wrapJsFunctionForAsync_closure.call$2 (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:37968:12)]
    [at _awaitOnObject_closure.call$1 (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:37956:32)]
    [at Object._rootRunUnary (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:5378:18)]
    [at StaticClosure.<anonymous> (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:124712:16)]
    [at _CustomZone.runUnary$2$2 (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:39399:39)]
    [at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:38457:51)]
    [at Object._Future__propagateToListeners (/Users/quentin/Code/nextjs-sass-issue/nextjs-sass-issue/node_modules/sass/sass.dart.js:5170:93)]

Import trace:
  Server Component:
    ./ui/TestComponent.module.scss
    ./ui/TestComponent.tsx
    ./app/page.tsx

Next.js version: 16.0.0 (Turbopack)

3. Go into next.config.ts and comment out additionalData.
4. Go into TestComponent.module.scss and modify the @use statement to use the absolute path to the variables directory on your machine.
5. If you updated the @use statement with the correct absolute path, the error should go away, because sass can now access the $background variable.

Current vs. Expected behavior

I expected includePaths and additionalData to make the variables available inside my module files.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.3.0: Thu Jan  5 20:48:54 PST 2023; root:xnu-8792.81.2~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.19.4
  npm: 11.6.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

CSS

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

next dev (local), next build (local), next start (local)

Additional context

No response

[fufuShih]

I also encountered the same problem when upgrading to Next 16.0.0 — But in my case, it triggers on Windows, but not on my Mac or Linux server.

However, in version 15.5.3, both work fine.

[qjstuart]

@fufuShih good to know it works in 15.5.3. I wish to avoid downgrading as that would mean I lose other fixes. Strange this issue did not trigger for you on Mac, as I am facing this issue on Mac.

I tried swapping SASS implementation, from the default to sass-embedded, but it made no difference for me.

One possible workaround is to manually use @use at the top of every .module.scss file where necessary. It seems like the @/* import alias is working in module.scss files, so at least we can write something like:

@use "@/assets/styles/variables" as *;

without having to resort to messy relative paths, or full absolute paths (which would definitely not work outside of local machine environment).

Please let me know if you have any other tips or suggestions.

[fufuShih]

I just tested the part on Windows where the bug occurs.

Using an absolute path or an alias (like @use "@/styles/FOO.scss" as *) causes an error.

But when I switch to a relative path (@use "../../styles/FOO.scss" as *), it works.

I suspect the issue might be related to path resolve, which could be causing problems with the alias method.

[qjstuart]

@fufuShih Did you place those paths inside sassOptions in next.config.ts? Or did you place them directly in your .module.scss files?

[VallisOctopus]

We are also facing the same issue where Next.js 15.5.3 works fine, but the upgrade to 16.0.0 breaks. I've tried alias path and relative paths, but nothing works

Is there any suggested fix for this?

[qjstuart]

@VallisOctopus I would suggest to stop using importPaths and additionalData from sassConfig if you are currently using them.

If you import the variables from within your scss files directly, where needed, you should manage to work around this problem.

[fufuShih]

Trying

next.config.ts

import type { NextConfig } from "next";
import path from "path";

const sassOptions = {
  // additionalData is causing "Error: Can't find stylesheet to import."
};

const nextConfig: NextConfig = {
  /* config options here */
  sassOptions: {
    ...sassOptions,
  },
  reactCompiler: true,
};

export default nextConfig;

ui\TestComponent.module.scss

// Comment or delete "additionalData" from next.config.ts
// Uncomment and modify the below @use statement to use the absolute path to the "variables" directory on your machine.
// The $background variable can now be accessed with no problems.

@use "@/assets/styles/variables" as *;

.test {
  background-color: $background;
}

[devsepnine]

I encountered a similar error when using a relative path in the next.config.js options, but it started working correctly after I changed it to a path using '@'.

• Next.js 16.0.1

next.config.js

...
const sassOptions = {
  // includePaths: [path.join(__dirname, 'styles')], not working includePath
  prependData: "@use '@/styles/common/_variables' as *;", // Replace relative imports with module aliases (using @/).
};
...

...
sassOptions: {
      ...sassOptions,
    },
...

[r34son]

sass-loader was updated in next 16 Read sass-loader v16 changelog to find breaking changes

[cbratschi]

I have the same problem with 15.x using Turbopack. It no longer processes additionalData.

16.x uses Turbopack by default. This could be the difference.

[cbratschi]

includePaths is not working either with turbo.

[cbratschi]

Related @import issue: https://github.com/vercel/next.js/issues/86431

[Netail]

includePaths is not working either with turbo.

In NextJS v16 they bumped to sass-loader v16, which includes using the modern Sass API by default as the legacy Sass API will soon be deprecated; Sass-loader changelog

The option includePaths became loadPaths with the modern Sass API

[cbratschi]

The option includePaths became loadPaths with the modern Sass API

Already defining both but does not work either. Even tried to define it in the sass-loader options. No luck.

[mooori]

Changing includePaths to loadPaths has fixed it for me. I'm building with turbopack on:

next 16.0.8
sass 1.95.0

Upgrading sass to a recent version might be one thing to try if loadPaths doesn't work.