next.js: Next 13 - When running turbo, scss stylesheets are not loaded

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; `

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 4
Comments: 15 (2 by maintainers)

Most upvoted comments

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

AlexLup06 on Nov 3, 2022

Guys, any news about?

joaoroche on Apr 21, 2023

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

meshackm on May 9, 2023

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

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.
The absence of this cache busting affects Tailwind CSS, the postcss-import plugin, Sass/SCSS imports, and likely other tools as well.
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.
I suspect cache busting causes HMR to pick up the change because the url of the CSS file changes.
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.

thecrypticace on Nov 29, 2022

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

NEOdinok on May 22, 2023

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:

https://github.com/vercel/next.js/pull/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?

akomm on Nov 25, 2022

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.

bennyjien on Nov 11, 2022

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.

nabilnalakath on Nov 10, 2022