Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Docs: Exporting Sass variables from CSS module files doesn't work with Turbopack [2 pull requests, 2 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#88544•Fetched 2026-04-08 02:04:30
View on GitHub
Comments
2
Participants
3
Timeline
11
Reactions
1
Author
VinnlVinnl
Participants
sash9696sash9696tophermurphytophermurphyVinnlVinnl
Timeline (top)
referenced ×5commented ×2cross-referenced ×2issue_type_added ×1

Fix Action

Fixed

PR fix notes

PR #6193: Switch from Webpack to Turbopack

Description (problem / solution / changelog)

<!-- The following is intended to be helpful to you. Feel free to remove anything that is not. --> <!-- When fixing a bug: -->

This PR fixes MPP-4535.

Turbopack is the default in Next.js now, so it's probably safest to align with that.

Some changes I had to do:

  • Set up Turbopack to load FTL files as raw strings.
  • Add the raw-loader dependency to do so.
  • Compensate for Turbopack (at the moment) loading those strings on the default export property for FTL modules, rather than having the complete module be a string.
  • Remove the MSW workaround — I no longer received build errors, so that no longer appears to be necessary. This seems to align with the current package.json of msw, which indeed now no longer sets any exports explicitly to null.
  • Switch to the function-style syntax for :global, since Turbopack always uses LightningCSS, which only supports that.
  • Hardcode the breakpoints we use, since Turbopack/LightningCSS won't support exporting variables from CSS: https://github.com/vercel/next.js/issues/88544
  • Next.js itself updated next-env.d.ts

How to test: no behaviour should have changed.

  • l10n changes have been submitted to the l10n repository, if any.
  • I've added a unit test to test for potential regressions of this bug. - N/A, existing e2e tests should cover this.
  • I've added or updated relevant docs in the docs/ directory.
  • All UI revisions follow the coding standards, and use Protocol / Nebula colors where applicable (see /frontend/src/styles/colors.scss).
  • Commits in this PR are minimal and have descriptive commit messages.

Changed files

  • frontend/next-env.d.ts (modified, +1/-1)
  • frontend/next.config.ts (modified, +7/-28)
  • frontend/package.json (modified, +4/-3)
  • frontend/src/components/layout/Layout.module.scss (modified, +1/-1)
  • frontend/src/functions/getL10n.ts (modified, +11/-1)
  • frontend/src/hooks/mediaQuery.module.scss (removed, +0/-10)
  • frontend/src/hooks/mediaQuery.ts (modified, +15/-21)
  • package-lock.json (modified, +898/-1)

PR #88597: docs: clarify Sass variables feature is only supported with Webpack

Description (problem / solution / changelog)

Clarifies that Sass variables exported from CSS Module files only work with Webpack and are not supported by Turbopack (the default bundler in Next.js 15+).

This addresses the documentation gap mentioned in issue #88544, where users may follow the docs and implement Sass variables only to discover their code breaks when using Turbopack.

The update:

  • Clearly states the Webpack-only limitation
  • Suggests switching to Webpack as a workaround
  • References the Turbopack configuration documentation

Fixes #88544

Changed files

  • docs/01-app/02-guides/sass.mdx (modified, +3/-1)

Code Example

> $primary-color: #64ff00;
> :export {
>   primaryColor: $primary-color;
> }
>
RAW_BUFFERClick to expand / collapse

What is the documentation issue?

The docs at https://nextjs.org/docs/app/guides/sass#sass-variables currently state:

Next.js supports Sass variables exported from CSS Module files.

For example, using the exported primaryColor Sass variable:

$primary-color: #64ff00;
:export {
  primaryColor: $primary-color;
}

Is there any context that might help us understand?

Turbopack explicitly doesn't implement this (edit: apparently also stated elsewhere in the docs), and neither does LightningCSS, so this only works when Webpack is enabled. That should probably be mentioned there, ideally along with an alternative solution (e.g. reverting back to Webpack, or another way to achieve the same thing).

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/guides/sass#sass-variables

extent analysis

TL;DR

The documentation for Next.js Sass variables should be updated to reflect that this feature only works with Webpack and not with Turbopack or LightningCSS.

Guidance

  • The current documentation does not account for the differences in support between Webpack, Turbopack, and LightningCSS, which could lead to confusion for users trying to use Sass variables.
  • To accurately reflect the current state of support, the documentation should be updated to include a note about the limitations of Turbopack and LightningCSS.
  • An alternative solution, such as reverting back to Webpack or using a different method to achieve the same result, should be provided for users who need this feature.
  • The documentation update should include links to relevant issues or documentation, such as the Turbopack and LightningCSS documentation, to provide additional context and information.

Example

No code example is necessary in this case, as the issue is with the documentation rather than the code itself.

Notes

The solution to this issue is primarily a documentation update, but it may also involve providing additional guidance or workarounds for users who are affected by the limitations of Turbopack and LightningCSS.

Recommendation

Apply workaround: Update the documentation to reflect the limitations of Turbopack and LightningCSS, and provide alternative solutions for users who need to use Sass variables. This will help to avoid confusion and provide a better user experience.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#mixed precision#training loop#device allocation#model download

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix Docs: Exporting Sass variables from CSS module files doesn't work with Turbopack [2 pull requests, 2 comments, 3 participants]