scss style not load correctly with scss module and typescript in dynamic folder route
See original GitHub issueBug 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:
- create a next project.
- add sass dependency
- create a dynamic router like
src/pages/[country]/index.tsx
andsrc/pages/[country]/index.module.scss
. - import scss module in tsx and load this dynamic page in browser.
- 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
.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:7
- Comments:5 (3 by maintainers)
Top GitHub Comments
For anyone else who see the same issue: currently, I use back to
@zeit/next-sass
. Here’s mynext.config.js
:To resolve the
@zeit/next-sass
dev issue(first time style not load on dev mode), add__webpack_reload_css__
toapp.tsx
. Here’s myapp.tsx
:Note, if you are using typescript, you need
yarn add -D @types/webpack-env
.Then all the scss module working for me.
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.