SCSS变量导出未在React中导入

Question

在我的React项目上进行了一个通用的包升级之后，JavaScript中的SCSS变量导入停止了工作。导入本身仍然工作，但是从SCSS导出的变量从未出现在JavaScript中。

我正在做的事情是：

_variables.scss:

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

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

反应中的：

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

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

这在软件包升级之前就可以使用了。导入的SCSS文件的路径是正确的，我对其进行了验证。除了类似的导出失败与其他文件，无论他们在哪里或他们的名字。

我认为问题就在包裹的某处：

当前的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"
    }
}

升级包之前的旧的package.json ：

{
    "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

更新:固定在CRA v5.0.0上

这是create-react-app版本4中出现的一个bug。这是关于吉特布的问题。从那时起就已经修复了，并且在下一个版本中应该是可用的。

同时，如果您使用某种方法覆盖CRA的webpack配置，您可以通过将compileType of css-loader设置为'icss'来修复它，如这个答案中所解释的那样。