#Turbopack ignores sassOptions.includePaths

1 messages · Page 1 of 1 (latest)

ebon zealot
#

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