SCSS variable export not imported in React

Question

After a general package upgrade on my React project, SCSS variable imports in JavaScript stopped working. Imports themselves are still working, but variables exported from SCSS never appear in JavaScript.

Here's what I'm doing:

_variables.scss:

$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;

:export {
    primaryMain: $akt-dark-teal;
    secondaryMain: $akt-light-blue;
}

In React:

import scss from './scss/parts/_variables.scss';

console.log(scss);                       //  [object Object]
console.log(scss.primaryMain);           //  undefined
console.log(scss.secondaryMain);         //  undefined

This used to work before the package upgrade. The path to the imported SCSS file is correct, I verified it. Besides similar exports fail the same way with other files, no matter where they are or what is their name.

I think the problem lies somewhere in the packages:

The current package.json:

{
    "name": "js-dashboard",
    "version": "0.0.1",
    "private": true,
    "homepage": "/public/",
    "dependencies": {
        "@date-io/moment": "^2.10.8",
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.57",
        "@material-ui/pickers": "^3.3.10",
        "@reduxjs/toolkit": "^1.5.1",
        "@stripe/react-stripe-js": "^1.4.0",
        "@stripe/stripe-js": "^1.13.2",
        "@testing-library/jest-dom": "^5.11.10",
        "@testing-library/react": "^11.2.6",
        "@testing-library/user-event": "^13.1.5",
        "@types/react-redux": "^7.1.16",
        "axios": "^0.21.1",
        "chart.js": "^3.1.1",
        "cryptr": "^6.0.2",
        "css-loader": "^5.2.4",
        "draft-js": "^0.11.7",
        "draftjs-to-html": "^0.9.1",
        "eslint": "^7.24.0",
        "firebase": "^8.4.1",
        "history": "^5.0.0",
        "html-react-parser": "^1.2.6",
        "http": "0.0.1-security",
        "https": "^1.0.0",
        "immer": "^9.0.1",
        "json-loader": "^0.5.7",
        "libphonenumber-js": "^1.9.16",
        "lodash": "^4.17.21",
        "material-ui-phone-number": "^2.2.6",
        "moment": "^2.29.1",
        "nanoid": "^3.1.22",
        "node-sass": "^5.0.0",
        "prop-types": "^15.7.2",
        "react": "^17.0.2",
        "react-beautiful-dnd": "^13.1.0",
        "react-chartjs-2": "^3.0.2",
        "react-csv": "^2.0.3",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.3",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-to-pdf": "0.0.13",
        "redux": "^4.0.5",  
        "redux-thunk": "^2.3.0",
        "reselect": "^4.0.0",
        "sass": "^1.32.11"
    },
    "scripts": {
        "start": "set PORT=3001 && react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^2.5.1"
    }
}

The old package.json before the package upgrade:

{
    "name": "js-dashboard",
    "version": "0.0.1",
    "private": true,
    "homepage": "/public/",
    "dependencies": {
        "@date-io/moment": "^1.3.13",
        "@material-ui/core": "^4.11.2",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/lab": "^4.0.0-alpha.54",
        "@material-ui/pickers": "^3.2.10",
        "@reduxjs/toolkit": "^1.5.0",
        "@stripe/react-stripe-js": "^1.1.2",
        "@stripe/stripe-js": "^1.11.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "@types/react-redux": "^7.1.11",
        "axios": "^0.21.1",
        "chart.js": "^2.9.4",
        "cryptr": "^6.0.2",
        "draft-js": "^0.11.7",
        "draftjs-to-html": "^0.9.1",
        "eslint": "^6.6.0",
        "firebase": "^7.23.0",
        "history": "^5.0.0",
        "html-react-parser": "^0.14.2",
        "immer": "^7.0.15",
        "json-loader": "^0.5.7",
        "libphonenumber-js": "^1.9.4",
        "lodash": "^4.17.20",
        "material-ui-phone-number": "^2.2.6",
        "moment": "^2.29.1",
        "nanoid": "^3.1.18",
        "node-sass": "^4.14.1",
        "react": "^16.13.1",
        "react-beautiful-dnd": "^13.0.0",
        "react-chartjs-2": "^2.11.1",
        "react-csv": "^2.0.3",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^3.4.3",
        "react-to-pdf": "0.0.13",
        "redux": "^4.0.5",
        "redux-thunk": "^2.3.0",
        "reselect": "^4.0.0"
    },
    "scripts": {
        "start": "set PORT=3001 && react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Answer 1

Update: fixed on CRA v5.0.0

---

This is a bug that appeared with the version 4 of create-react-app. Here is the issue about it on Github. It has been fixed since then and the fix should be available in the next release.

In the meantime, if you use something to override the webpack config of CRA you can fix it yourself by setting the compileType of css-loader to 'icss' as explained in this answer.