question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

css-modules break styles.css file

See original GitHub issue

It seems that gatsby build writes to /pubic/styles.css when it processes build-css (code) and then it overwrites /public/styles.css during build-html (code). Only the first version is good, it contains all global css and all css-modules code, but the 2nd write, after build-html, includes only styles from css-modules. I’ve observed this behavior with both, my project and gatsby-starter-default. Right now i’d be left without 99% of css, so i changed build-html to write to styles.modules.css for now. Before i started to use css-modules i had no such problems, so i guess it’s related to css-modules.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
sillysluxcommented, Apr 14, 2017

Earlier it wrote to styles.modules.css (my workaround), now it writes to .styles.css, same thing and good enough for me. Thanks again.

0reactions
KyleAMathewscommented, Apr 14, 2017

Yeah… perhaps people only use either CSS modules or regular CSS so they didn’t notice that they were interfering with each other.

Just released 0.12.44 — please upgrade and test and report back if things are working now!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to configure CSS and CSS modules in webpack
And if you want CSS modules and CSS it can be even more confusing. ... The first thing we are going to do...
Read more >
What are CSS Modules and why do we need them?
With CSS Modules, it's a guarantee that all the styles for a single component: ... Plus, any component can have a true dependency,...
Read more >
css modules query breaks css rules with latest css-loader
The css modules produce class names by the localIdentName pattern but the .profile ... styles: Object { profile: "main-profile-2P-yNf0J", ...
Read more >
CSS Code Splitting | Tan Li Hau
The motivation of CSS splitting arises when we try to split our CSS styles and lazily load the styles only when we actually...
Read more >
How to Style React Components Using CSS Modules
CSS modules provide a way to locally scope CSS class names. You don't have to worry about overriding styles when you use the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found