scss style not load correctly with scss module and typescript in dynamic folder route

[leizhao-coupa]

Bug report

Describe the bug

Tried next js 9.3.2 with typescript and scss module. As the doc mentioned, now I only need install sass dependency. And the global level, component level and static route all working great. But when I have a dynamic folder structure, for example, src/pages/[country]/[showId]/index.tsx, and then this page cannot load scss module correctly. Also tried add a scss module in src/pages/[country] folder and apply it to the page component, it also doesn't work.

But when I tried src/pages/[country].tsx and add a scss module for it to load, then it can load correctly.

Looks like the scss module load in my dynamic page component, but the style was not load.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. create a next project.
2. add sass dependency
3. create a dynamic router like src/pages/[country]/index.tsx and src/pages/[country]/index.module.scss.
4. import scss module in tsx and load this dynamic page in browser.
5. the style is missing. But do see the generated scss module variable.

Expected behavior

scss style should also applied.

Screenshots

System information

• OS: macOS
• Browser: chrome
• Version of Next.js: 9.3.2

Additional context

Tried use back to @zeit/next-sass, and then for most cases for above situation, it's working. But in develop mode, it has a bug with the Link. If user click a Link to go to a new page, when the new page first time loading, the style is missing. But later, the style will come back. This is only an issue in develop mode. Didn't see in prod mode with @zeit/next-sass.

[timneutkens]

@schwamic you can use the GitHub 👍 feature to upvote an issue. Please don't post "Same here" as it is not constructive.

[sridaradappt]

I too see this issue, when running in dev mode. Any workaround to fix this ?

[timneutkens]

@sridaradappt you can use the GitHub 👍 feature to upvote an issue. Please don't post "Same here" or "I too see this issue" as it is not constructive.

[leizhao-coupa]

For anyone else who see the same issue: currently, I use back to @zeit/next-sass. Here's my next.config.js:

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  distDir: 'dist',
  cssModules: true
});

To resolve the @zeit/next-sass dev issue(first time style not load on dev mode), add __webpack_reload_css__ to app.tsx. Here's my app.tsx:

if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.addStatusHandler(status => {
    if (typeof window !== 'undefined' && status === 'ready') {
      window['__webpack_reload_css__'] = true;
    }
  });
}

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

Note, if you are using typescript, you need yarn add -D @types/webpack-env.

Then all the scss module working for me.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.