Next 13 - When running turbo, scss stylesheets are not loaded

[rmsheppard]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
Binaries:
  Node: 16.14.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.2-canary.0
  eslint-config-next: 13.0.1
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

Scss modules do not appear to be loading under the new turbo

The style import always returns undefined.

Expected Behavior

Style is loaded and the red background css is present on the div.test element.

Link to reproduction

used npx-create-next-app

To Reproduce

When creating a new project from following command:

npx create-next-app@latest --experimental-app

And updating dev script to inlclude the turbo flag
"dev": "next dev --turbo",

Also loaded npm package "sass" as per instruction

When creating a very basic scss file: (./test.module.scss) in the app directory
.test { background-color: red; }

And creating an page.js file in app directory
`
import styles from './test.module.scss';

const Home = () => {

return (
	<div className={styles.test}>
		test
	</div>
);

};

export default Home;
`

[AlexLup06]

It does not even work without turbo. No styles are applied whatsoever when navigating between pages. Guess css modules are just broken.
Regular css files get applied, like global.scss
Always have to reload the page for styles to be applied

[nabilnalakath]

Is this issue resolved? I guess it was a bad decision to use Next 13 at the moment for new projects.

But we have noticed that the styles are getting loaded if we use <a> tags instead of <Link> for navigating. But that shouldn't; be the solution I believe.

[bennyjien]

Without turbo, I also encounter issues when applying scss on app folder.
Imported scss style (@import / @use) won't trigger Fast Refresh. As a workaround I refactor to minimize the use of import.

// app/layout.tsx

import "../styles/globals.scss"

export default function RootLayout({ children }) { ... }

// styles/globals.scss

@use "globals/common"; // editing on common.scss file won't trigger Fast Refresh

.site {
  background-color: red; // changes here will trigger Fast Refresh
}

Is there any way to trigger Fast Refresh on imported styles? This is not an issue with Next 12 since we load globals on _app.tsx.

[akomm]

The problem is not specific to scss or css modules. I use tailwind and have the same problem. Its a general problem of imported css files, no matter what generated them:

// app/layout.tsx
import "./layout.css"

When I change and save the file directly, without changing any of the ts(x) files, next dev compiler detects "a change" and outputs:

wait  - compiling...
[dev:*app] event - compiled client and server successfully in

So it does track the file correctly as a dependency because it was imported. I checkd the webpack resource URL of the css file directly and its updated there as well.

The reason why there is no update on the page is because the style tag does not get reloaded. The browser does not know the file behind the URL has changed, it does not receive any event to reload the css file and hence no recompute & repaint occur.

[akomm]

I found at least one reason, why css does not reload. Because the author of the issue has a different version than me, it might be two different bugs.

I'm using next 13.0.5. I'm pretty sure the following PR in 13.0.5 broke the css reload:

#43185

When I downgrade to 13.0.4 reload on css update works again.

The PR has removed the timestamp from the css file and so the url never changes and the browser does not reload it.

Maybe some of the people here, especially those transpiling from scss have the same issue?

[thecrypticace]

Hey, Jordan from the Tailwind Labs team here. We've done some investgating of this issue ourselves and want to share our findings:

1. The CSS cache busting does appear to be required with the current implementation. This is because external files can influence the resulting, compiled output of the CSS file and HMR updates are unaware of this.
2. The absence of this cache busting affects Tailwind CSS, the postcss-import plugin, Sass/SCSS imports, and likely other tools as well.
3. The CSS file itself is regenerated which you can see by requesting the file directly in the browser. The problem is that HMR is not notified that the file has changed and thus does not reload the CSS file.
4. I suspect cache busting causes HMR to pick up the change because the url of the CSS file changes.
5. If you edit the JSX and then modify the CSS file (not just re-save but modify the content — a comment is sufficient) HMR picks up the changes from the CSS file and from Tailwind CSS.

I've created a minimal reproduction with Tailwind CSS that you can take a look at.

[akomm]

@thecrypticace looks like what I'v observed and suspected. No update event and prior to removal of the timestamps in 13.0.5 from the CSS files, the bug was unnoticed because the refresh was triggered by browser reloading the file as the URL changed.

I wonder: Since the output css does change and its imported on a route (tsx) shouldn't it be tracked by HMR for changes as it is a dependency of the tsx file?

[dawsnap]

I was having issues with tailwind styles to load as well, just fixed it by upgrading to [email protected]

https://github.com/vercel/next.js/releases/tag/v13.1.1

[joaoroche]

Guys, any news about?

[joaoroche]

Guys, problem solved in version 13.4.1

[meshackm]

Am using Next 13.4.1 and getting this error when using Turbo
"Turbopack does not yet support importing Sass modules."

[NEOdinok]

Next.js @13.4.3 still get the error "Turbopack does not yet support importing Sass modules."

[kostalexis89]

I have the same issue. SCSS modules are not loaded on SSR. When i do 'use client' to my components then the styles are there. Also for the components that Im loading directly into the Layout file, styles are working on SSR and on Client Side. I have tried everything. Downgrade from 13.4.3 to 13.4.1, install postscss, loaders and I dont know what to do.
Can somebody help here ?

[gabimoncha]

Same issue in "next": "^13.5.4",

SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "Auth.scss";

[Cow258]

Fully Reproduce Repo
https://github.com/Cow258/next-turbo-scss-demo

1. Open packages/client/styles/page/_home.scss
2. Change the .demo-head color to red
3. It will never compile again that mean hot reload not working

Tested on [email protected]

[pietro909]

Not related to Next itself, but I hope it'll help the next dev landing on this discussion: as silly as it sounds, my issue was that I had somehow set an override for the CSS files.
No idea how it happened but took me a bloody hour to find it 😢