Javascript SCSS变量导出未在React中导入

在我的React项目上进行常规包升级后，JavaScript中的SCSS变量导入停止工作。导入本身仍在工作，但从SCS导出的变量从未出现在JavaScript中

以下是我正在做的：

\u变量。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

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

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

在反应中：

$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

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

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

这通常在包升级之前起作用。导入的SCSS文件的路径正确，我已验证。此外，类似的导出失败的方式与其他文件相同，无论它们位于何处或名称如何

我认为问题出在包装的某个地方：

当前的

包.json

：

$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

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

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

包升级之前的旧

package.json

：

$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

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

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

---

这是一个出现在

create react app

版本4中的错误。从那时起它就被修复了，该修复应该在下一个版本中可用

---

同时,，如果您使用某种方法来覆盖CRA的webpack配置，您可以通过将

css loader

的

compileType

设置为

'icss'

来自行修复它，如中所述。

我恐怕没有为您解决的方法，但我正在react中处理一个项目，我想将SCSS变量导入react中，几天后我就完成了放弃了。看看别人怎么说会很有趣。不知道这是否是更新的react.js中的一个bug。很可能是。谢谢！不幸的是，在最新版本中，这个小故障似乎一直存在。这就是造成我麻烦的原因。所以我们等着……是的，

icss

fix对我有效。