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

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.

With the new release of CRA (4.0.2), I looked into this again. Unfortunately, it is still not working.

However, after seeing this issue at css-loader, I decided to look into this again and found a more elegant solution than the one described above.

The issue is caused by the fact that in the Webpack configuration offered by Create React App. In there, the non-module scss files have the CSS-loader compileType module (that is the default). Since CSS-loader v4 broke :import and :export, you now need to explicitly specify the compileType to be icss (see https://github.com/webpack-contrib/css-loader/issues/1134).

This can be configured in the css-loader options (the example is given at https://github.com/webpack-contrib/css-loader#separating-interoperable-css-only-and-css-module-features).

This means the Webpack configuration offered by Create React App needs to be modified. Since we use craco in our project, we can do the following.

In craco.config.js:

    style: {
    css: {
      loaderOptions: (cssLoaderOptions, { env, paths }) => {
        // We want to select the CSS loader config for all plain `.scss` files. In the current CRA Webpack configuration,
        // this SCSS rules are defined by using `importLoaders: 3`. To make a distinction between the rules for SCSS modules
        // and plain SCSS files, we need to look for the loaderOptions where no modules are set. The if-statement below
        // filters this and keeps existing CRA configuration for all other rules intact.
        //
        // See https://github.com/facebook/create-react-app/blob/b9963abde5870d46cd906160f98f81dbc0a5ecf2/packages/react-scripts/config/webpack.config.js#L563
        if (cssLoaderOptions.importLoaders !== 3 || cssLoaderOptions.modules) return cssLoaderOptions

        return {
          ...cssLoaderOptions,
          modules: {
            compileType: 'icss',
          },
        }
      },
    },
  },

The above configuration will make exporting SASS variables work again (without renaming files to .module.scss) 🎉.

Of course, this is very hacky and fully depends on the current setup of the CRA webpack configuration. I’ll issue a PR ASAP at CRA to fix this over there.

PR can be found here: https://github.com/facebook/create-react-app/pull/10511

@TakanashiOuken The issue is not resolved yet with 4.0.3

Is this fix merged in 4.0.3?

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.

yeah this solution works fine, but still issue is not resolved 😦

@thabemmz Thanks for looking into this, much appreciated.

Bump. Please could you merge/release the fix?!