Next.js Discord

Discord Forum

Hello, help to understand why the output of styles in the developer panel is duplicated?

Unanswered
Lionhead posted this in #help-forum
Open in Discord
LionheadOP
I use nextjs with App routing, for styles - modul scss
I saw that the styles are duplicated, if you look at them through the developer panel, they are the same, but some are crossed out, others are also normal
styles from layout and page files are sometimes duplicated
Will it not affect the speed of loading or will there be duplication of styles in the files?
Tell me why it is displayed like this?

6 Replies

LionheadOP
the styles file is in the same folder as the component file
@Clown Check if it still occurs in production mode
LionheadOP
I made the build, launched the application with the npm run start command, there is duplication of styles
the button component is reused on different pages, but it has only one style file, it is located in the same directory as the component and is imported only into the button component
LionheadOP
it is very similar to the fact that the styles for the button are added to each css file of the page on which this button is present
for example, if the button is on CatalogPage, then the code from Button.scss is duplicated in CatalogPage.scss and so on
LionheadOP
Is everything ok is this how Next.js works with styles? Is this an error in the connection of styles in the Next.js project?.