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.

Composing class from another scss css modules results in invalid stylesheet in production

See original GitHub issue

Describe the bug

SCSS + CSS Modules problem.

During production build only, Composing from one SCSS + CSS Modules stylesheet into another results in invalid CSS in the final main.hash.chunk.css stylesheet. This problem does not occur when doing a development build.

In the final css file, there are basically two copies of the composed stylesheet, one of which has not been processed by Sass, the the other of which has missing properties (only properties that had sass variables?) . This results in invalid syntax in the file, and invalid styles.

Did you try recovering your dependencies?


Which terms did you search for in User Guide?

I’ve searched to see if there’s any caveats with using Sass and CSS Modules together. It did not appear there are any.


Environment Info:

    OS: macOS 10.14.5
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Node: 10.15.3 - /usr/local/opt/node@10/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
    Chrome: 76.0.3809.100
    Firefox: 67.0
    Safari: 12.1.1
    react: ^16.9.0 => 16.9.0
    react-dom: ^16.9.0 => 16.9.0
    react-scripts: 3.1.1 => 3.1.1
    create-react-app: Not Found

Steps to reproduce

  1. Have App.module.scss, as a stylesheet using Sass features (such as variables for background colour)
  2. Have other.module.scss, as a stylesheet, with a class name that composes something from App.module.scss
  3. Import both App.module.scss and other.module.scss
  4. yarn build

Expected behavior

Styles are fine. It should look like this, and the compiled stylesheet should something like this

Actual behavior

Styles are not fine, it looks like this and the compiled stylesheet looks something like this

As seen in the linked file, the Sass variables have not been compiled away.

Screenshot 2019-08-26 at 18 59 47

Reproducible demo

I have created a minimal reproduction branch here which has been deployed

If I comment out the composes: the issue does away, which you can see deployed here

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:14

github_iconTop GitHub Comments

joshhuntcommented, Dec 9, 2019

I submitted a pull request to fix this issue, but unfortunately it has not been looked at yet 😃

stale[bot]commented, Jan 13, 2020

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS modules not working for react version 16.6.0
I had this same problem and solved it by renaming my css file to: myName.module.css. and also importing like this: import styles from...
Read more >
Sass: @extend
There are often cases when designing a page when one class should have all the styles of another class, as well as its...
Read more >
How to configure CSS Modules for webpack - LogRocket Blog
In short, CSS Modules are component-based stylesheets that allow us to create contained, modular CSS by creating unique classes and scoped ...
Read more >
What are CSS Modules and why do we need them?
Even if a module imports both stylesheets, then it has a custom name which our build process makes specifically for that class. In...
Read more >
Using CSS Modules in React - OpenReplay Blog
In React js, where classes function similarly to local variables in JavaScript, a CSS Module is just a .css file. It lessens React...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found