Next.js: styles in sass file doesn't put on element in first refresh in nextjs

[mahyarfrd70]

I have nextjs project that I use styled-jsx and sass for styling. but I have a problem just in development mode. I run the project in development mode and open it on the browser and click on the link to go to another page but when the page changes, styled-jsx loads in page and elements get these styles but styles that exist in sass file doesn't load and when refresh page both styles load in a page.

this is my code :

//index page

const Index: NextPage<{}> = () => {
    return (
        <Link href="/home">
            <a>home</a>
        </Link>
     );
};
export default Index;




//home page

import React from "react";
import "./style.scss";
const Home = () => {
    return (
        <div className="home_box">
            <p className="home_text">Test</p>
            <style jsx>{`
                .home_text {
                    color: red;
                }
            `}</style>
        </div>
    );
 };
export default Home;



//style.scss

.home_box{
     background-color: green
}

and this is a demo of my app:

as you see in the picture I change route and my sass style doesn't exist but when I refresh the page it appears.

it happens just in development mode and just for the first time. in production, everything works well.

how can I fix this problem?

[timneutkens]

Assuming it's a wrong babelrc, but hard to say when no reproduction is provided and the issue template is ignored.

[mahyarfrd70]

Assuming it's a wrong babelrc, but hard to say when no reproduction is provided and the issue template is ignored.

Hi

https://github.com/mahyarfrd70/next-typescript-boilerplate/blob/master/README.md

This is my repo and you can see my config there . Thanks for help me.

[vixeven]

I have the same problem with css files (imported via @zeit/next-css). It needs a refresh to get applied.

[mahyarfrd70]

I have the same problem with css files (imported via @zeit/next-css). It needs a refresh to get applied.

test your problem in production mode . there isn't problem for me in production mode . please check it and report.

[vixeven]

@mahyarfrd70 Yeap. After build app works just fine.

[guilhermepontes]

I'm also having this problem in development (with @zeit/next-sass) and Next 9.2.2.

[evanlask]

I believe at the moment next does not have a way of injecting new styles for a page after routing when using scss.

In development mode it generates a stylesheet which only contains styles for your current route. In production mode it generates a stylesheet containing all styles for the entire app.

A work around for the issue could be to create a sass file app.scss that you import in to the App component. Then @import all of your various sass files into app.scss instead of every individual page or component. You end up with one big stylesheet but you won't have to reload in development mode just to see styles.

[AliMSDev]

I think that you can doing with external SCSS file and import it into your project.

[iOiurson]

Same problem for me in dev mode.
Works fine in production, but i would be nice to have it fixed in dev.

[chornos13]

Same problem here only in dev mode.

[chornos13]

Hey @mahyarfrd70 , try this fix. move to node ^12 and install your packages with yarn and run your development with yarn dev instead of npm run dev.

I tried this, but no luck

[Timer]

Closing as this should be fixed with the new Fast Refresh integration.