Next.js Discord

Discord Forum

Turbopack ignores sassOptions.includePaths

Unanswered
Red-breasted Merganser posted this in #help-forum
Open in Discord
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:
  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

---

0 Replies