Changes to nested Sass/SCSS files do not trigger hot-reload #82273
Replies: 4 comments 1 reply
-
|
Hi @zacol, Thanks for reporting this. Turbopack currently does not detect changes in nested Sass/SCSS files imported via @use or @import because its file watcher tracks only directly imported files. This means changes in partials don’t trigger hot reload until a directly imported file like globals.scss changes or the dev server restarts. Possible workarounds: Import partials directly in your components or layouts so Turbopack watches them. Make a trivial change in globals.scss after editing partials to trigger reload. Use Webpack instead of Turbopack if hot reload on nested Sass files is critical for your workflow. Keep an eye on Turbopack updates as this limitation may be addressed in the future. Thanks for the detailed example. This feedback helps improve Turbopack. |
Beta Was this translation helpful? Give feedback.
-
|
@SametDulger is there an issue already created for this? Would love to track it, if it does get resolved. Right now, this seems to be the last issue keeping my team from adopting turbopack, which we are excited to do! |
Beta Was this translation helpful? Give feedback.
-
|
I couldn’t find any existing issue. |
Beta Was this translation helpful? Give feedback.
-
|
@SametDulger I have the same problem useing Webpack. Do we have any workaround ? |
Beta Was this translation helpful? Give feedback.
-
|
Hello 👋, I ran into the same problem using **Next.js 15.4.6 the issue was happening both with and without the --turbopack option. As a workaround, I downgraded to **Next.js 15.3.3, and that seems to have fixed it for now. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
In my project I use Next 15.4.5, combined with CSS Modules + Sass/SCSS. I have a
layout.tsxfile that imports aglobals.scssstyle file. This in turn uses@useto import smaller files containing mixins, functions and variables. You can see the example files below.The import itself works and the variables are available, but I have a problem with the hot-reload mechanism. It turns out that Turbopack doesn't detect changes made to files that are loaded with
@useor@import. The changes are visible after restarting the development server or after making some change inglobals.scss(a file that is imported directly by the component). The problem doesn't occur if you use Webpack instead of Turbopack.I would like to know if this is a known problem and if there is perhaps a way to solve this problem without giving up Turbopack?
app/layout.tsx
styles/globals.scss
styles/variables.scss
Beta Was this translation helpful? Give feedback.
All reactions