Some CSS styles not work on deployment

Support
,
1

Hi there !
I made my own program with Create-react-app and used CSS Module for styling.
This is the link of my project: GitHub - sajjadpaknia/dalbi
Some styles disappear when deployed.
Some elements are not styled if they are displayed correctly on local.
Thank you for helping me.

2

Hi there, glad you found us :wave:t6: : before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “example-jones.netlify.com”
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console
3

This is my project : https://dapper-lily-e83311.netlify.app/
As you see Header has no styles but that has style in local.
I tried with other deployment sites but the problem wasn’t solved.
My question is why some elements have not any styles when I deploy the project.

4

can you try opening the local site in dev tools and comparing the classes on the local site vs the live site?

5

Yes, I did, they are the same, in local It works but in deployment not.

6

If you run npm run build and view the built site as suggested

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

you’ll see the same thing locally as on Netlify (it isn’t a Netlify issue nor, as you have observed, an issue with any other platform, but the project itself.)

The issue comes down to this:

In dev (i.e. npm start) the <header> is:

<header class="Header_header__mtodi">
<!--other content-->
</header>

with the styles

.Header_header__mtodi {
  position: relative;
  width: 100%;
  height: 90px;
  padding-top: 30px;
}

In production (i.e. npm run build) the <header> is:

<header class="Header_header__mtodi">
<!--other content-->
</header>

with the styles

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

This CSS block is coming from src/CSS/reset.css and is overriding your custom styles.

Exactly how to fix this I have no idea as I use React very little.

7

this is exactly my issue :face_exhaling: