Turbopack ignores sassOptions.includePaths
Unanswered
Red-breasted Merganser posted this in #help-forum
Red-breasted MerganserOP
Environment:
- Next.js: ^16.1.6
- sass-embedded: 1.93.3
- Using Turbopack for both dev and build
Description:
I have sassOptions.includePaths configured in next.config.ts:
With webpack, this allows any SCSS file to import shared tokens using a short path:
@use "design-tokens" as *;
However, with Turbopack (next dev --turbopack / next build --turbopack), this fails:
Error: Can't find stylesheet to import.
@use "design-tokens" as *;
^^^^^^^^^^^^^^^^^^^^^^^^^
As a workaround, every SCSS file must use a full relative path, which gets unwieldy in deeply nested components:
@use "../../../../../styles/design-tokens.scss" as *;
Expected behavior:
Turbopack should respect sassOptions.includePaths, allowing short @use paths just like webpack does.
Reproduction:
1. Configure sassOptions.includePaths pointing to a shared styles directory
2. Use @use "filename" as * (without relative path) in any SCSS file outside that directory
3. Run next build --turbopack → build fails
4. Replace with relative path → build succeeds
---
- Next.js: ^16.1.6
- sass-embedded: 1.93.3
- Using Turbopack for both dev and build
Description:
I have sassOptions.includePaths configured in next.config.ts:
sassOptions: {
implementation: "sass-embedded",
includePaths: [
path.join(__dirname, "src"),
path.join(__dirname, "src", "styles"),
__dirname,
],
},With webpack, this allows any SCSS file to import shared tokens using a short path:
@use "design-tokens" as *;
However, with Turbopack (next dev --turbopack / next build --turbopack), this fails:
Error: Can't find stylesheet to import.
@use "design-tokens" as *;
^^^^^^^^^^^^^^^^^^^^^^^^^
As a workaround, every SCSS file must use a full relative path, which gets unwieldy in deeply nested components:
@use "../../../../../styles/design-tokens.scss" as *;
Expected behavior:
Turbopack should respect sassOptions.includePaths, allowing short @use paths just like webpack does.
Reproduction:
1. Configure sassOptions.includePaths pointing to a shared styles directory
2. Use @use "filename" as * (without relative path) in any SCSS file outside that directory
3. Run next build --turbopack → build fails
4. Replace with relative path → build succeeds
---