Create-react-app: CRA 4 failed to make SASS variables available to JavaScript (OK with CRA 3.x)

[guicara]

How to read SASS variables in JavaScript?

With Create React App 3.x it is possible to make SASS variables available to JavaScript. To make variables available, we simply need to export them with the :export syntax. For example:

$color-black: #000000;

:export {
    colorBlack: $color-black;
}

We can then import the SCSS file into JavaScript to access the variables defined in the file:

import colors from './template/colors.scss';

console.log('colors', colors.colorBlack); // will output #000000 in the console

It can be really useful to export SASS variables. For example, in our projects, we often create custom themes for Material UI to change the colors, the typography, the components... and will also use SASS. Therefore, we can directly import SASS variables in our Material UI theme:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: colors.colorBlack,
    },
    secondary: {
      main: colors.colorBlue,
    },
  },
});

As far as I know, react-scripts use css-loader as a dependency to configure webpack to enable this feature.

_More info about :export here and here._

Describe the bug

Create Rect App 4.0.0 cannot read the exported variables. The variables are undefined.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

N/A

Environment

Output of npx create-react-app --info:

Environment Info:

  current version of create-react-app: 4.0.0
  running from /home/user/.npm/_npx/119730/lib/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 82.0.2
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.0 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

_N.B: You can clone my demo repositories (see below) if you don't want to manually reproduce the bug._

Requirements: you need to setup Sass in Create React App. Please follow the documentation here.

1. Create a SCSS file
2. Export a variable with the :export keyword (see example above)
3. On a JavaScript file or a React Component, import the SCSS file
4. Try to read the variable

Expected behavior

The value of the SASS variable should be available in JavaScript.

Actual behavior

The variable is undefined.

Reproducible demo

You can close the following repositories and just run yarn start.

With CRA 3:

https://github.com/guicara/create-react-app-3-bug-scss-variable-export

With CRA 4:

https://github.com/guicara/create-react-app-4-bug-scss-variable-export

Anyone have some ideas or suggestions?
Thank you for your help!

[guicara]

I've got some updates...

I have just discovered, that CRA 4 is able to read the SASS variables if the SASS file is named as <name>.module.scss.

In App.tsx of the demo repository, we can do something like that:

import colors from './template/colors.module.scss';

Not ideal _(these SASS files are not CSS modules in this context)_ but it works.