CSS Modules Breaking in Production with Create React App

Question

I'm using css modules in a create-react-app project (React V17.0.2 / React-Scripts V4.0.3). All seems well in local but the styles break in production (hosted on netlify).

I believe the problem is that the css modules are not recognizing variables I've defined globally in plain css files. Here's an example of the set up I came up with:

index.css file imported at the top level index.js in my react project:

@import '../Global/ColorScheme.css';

body {
  // body styles
}

a {
  // global a tag styles
}

ColorScheme.css:

:root {
    --green: #00b890;
    --pink: #ef767a;
    --brown: #554348;
    --orange: #fb8f67;
}

Then some CSS module consuming global styles from ColorScheme.css..

SomeFile.module.css

.greenBox {
    background-color: var(--green);
    height: 500px;
    width: 500px;
    border: 1px solid #333;
}

Example Component

import React from 'react';
import styles from '../somePath/SomeFile.module.css';

export default function MyComponent() {
    return <div className={styles.greenBox} />;
}

When I run it locally I will get a green box with height & width at 500px with a 1px solid black border around it. So all is working as expected. However the production build will show a 500px by 500px box with 1px solid black border but no background color. I'm guessing it's the disconnect is when a css module is using a variable defined in a plain css file. Maybe something with the way webpack compiles down a create-react-app for production build?

Does anyone have any ideas as to why this might be happening and any way I can get around it? I've seen instances of global variables in css modules but I'm trying to avoid importing the global styles in every single module.

Answer 1

I found the solution to my own problem and originally had that solution in the OP as an edit. Moving this to 'Answer my own question' so it's more clear if someone finds this issue in the future:

I found a work around by chance, but I don't understand the 'why' or 'how'. It seems like my custom CSS properties defined in :root were working, just not the ones I titled with color names (i.e. --navy, --green, --orange, or even --gray-scale-0). After running create-react-app's standard npm run build the produced main.css file would replace my css like this:

Some CSS Module Before Build

.someClass {
    color: var(--green);
    background-color: var(--gray-scale-0);
}

Same Class in Main.####.chunk.css After Build

.someClass {
    color: var(green);
    background-color: var(gray);
}

Changing my custom properties to something like --theme-orange or --theme-green works just fine. I'm still new to webpack and preprocessors so if anyone knows why this happens I'd love to know.

Answer 2

You should define the variable with $ and use it also with $ without any problem =>

$green : #00b890;


.greenBox {
   background-color: $green;
}