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.