search

fwojciec / simple-i18n-example

Simple example of a multilingual site in Next.js using dynamic routing.
161 stars 34 forks source link

Conflict with SCSS? #2

Closed billzhong closed 4 years ago

billzhong commented 5 years ago

Hi,

I try to use this i18n method with SCSS. I enabled SCSS support by following official docs. However, after I add import "../styles.scss" to /components/Layout.tsx, the / to /en or any languages redirection won't work. The locale subpaths still works, just the redirect doesn't work.

fwojciec commented 4 years ago

Thanks for reporting this! Can you try the latest version? I hope the new, simplified version of the redirect logic in pages/index.tsx will solve the issue.

billzhong commented 4 years ago

Yes, it works, thanks. Also I tried router.replace(`/${getInitialLocale()}`); and it is working too. Just curious what caused this issue?

fwojciec commented 4 years ago

No idea, to be honest. In my experience css/scss in next.js is very quirky, which is why I'm currently using styled-jsx in my projects -- maybe things will improve after https://github.com/zeit/next.js/issues/8626 is added.

I'm currently without my laptop so I didn't have a chance to debug this thoroughly -- it did look like the router object returned by useRouter hook is different when the stylesheet is imported compared to a scenario where no scss imports are included...

I'll close this for now, but if you happen to find out more about this please feel free to re-open. Thanks again!