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

[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

[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.