Hi, I hope you can help with an issue I am having.
My site mathews-fake-store is successfully building but I have a component which does not seem to be getting its css styles. I have checked all the common things like case sensitivity and import paths. I have even tried to re-write the file with new naming and import that into the component.
In the build log I am getting a esbuild CSS minify warning for a css-syntax-error that doest exist in the code. I am assuming this might be the issue.
any help with this issue would be greatly appreciated.
PM: [esbuild css minify]
12:52:19 PM: ▲ [WARNING] Expected identifier but found whitespace [css-syntax-error]
12:52:19 PM: :296:8:
12:52:19 PM: 296 │ width: 40px;
12:52:19 PM: ╵ ^
12:52:19 PM: ▲ [WARNING] Unexpected “40px” [css-syntax-error]
12:52:19 PM: :296:9:
12:52:19 PM: 296 │ width: 40px;
12:52:19 PM: ╵ ~~~~
12:52:19 PM:
@ritchmat89 It’s not valid CSS…
Hi @nathanmartin
Thanks for the reply.
This is what it looks like in my vsCode. I don’t understand why its converting from my vscode format to the version in your screen shot. Can you help?
There seems to be an issue with having CSS in there own component files. As soon as I add the css to the main app.css all the styles appear and work fine. I dont understand why there individual component css files are getting the error when the code in VScode is correct.
@ritchmat89 Run your build locally and check the files that are generated.
I suspect you’ll find that the problem occurs during your build, and is unrelated to Netlify.
Why it is happening I couldn’t say, I don’t work for Netlify and don’t have time to investigate for you.
It seems like you’re starting to pin it down though.
Thank you,
The frustrating thing is that if I run the project locally it works 100% with no issues. It was only when adding it to Netlify did the errors occur and the css didn’t work for certain components.
It appears like copying and pasting that css from the component css file to the main app.css file solves the problem. I dont know why this is the case and will try to figure it out.
Thank you for your help.
Make sure you are testing the “build” locally.
Don’t compare it to any “development command” you may have.
If you’re unaware, many systems don’t work identically between their “develop” and “build”.
Sometimes people only ever run the “develop” locally, and the “build” on Netlify.
It tends to give them the false impression that “everything is ok and Netlify is breaking their project”.
The reality is usually just that their build is broken in some way that doesn’t appear when running “develop”.
A classic example is that your CSS may be getting mangled by configuration you have that only applies to “build”, for example “minification”.
You wouldn’t usually see an issue when using “develop”, as it wouldn’t run that config or do the minification.
Thank you very much for the advice. I will definitely do this in future.
