javascript - SCSS 变量导出未在 React 中导入
问题描述
在对我的 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"
]
}
}
解决方案
这是第 4 版出现的错误create-react-app
。这是 Github 上关于它的问题。从那时起它已被修复,并且该修复应该在下一个版本中可用。
同时,如果您使用某些东西来覆盖 CRA 的 webpack 配置,您可以通过将compileType
of设置css-loader
为来自行修复它,'icss'
如本答案中所述。
推荐阅读
- python - 在 Tensorflow 中使用 DENet 算法时输入形状不兼容
- arm - 如何在 LS1043a NXP 上禁用内核
- javascript - 如何更改表单内的显示无输入?
- mysql - 从 MySQL 表中检索属于一组用户的最新模型
- json - RAD Server Delphi - 由于 Json 转换后元音突变,使用 savetostream 和 loadfromstream 不起作用
- flutter - 如何在 DropdownBelow 中显示不应在其列表中的提示文本
- python - 如何比较 Google 或工具中的 set() 和 list()?
- python - 如何根据Django中一个模型的计算重新计算另一个模型中的字段?
- c++ - 子构造函数使用祖父构造函数
- c++ - 为什么 C++ (cpp) 中的这个 sortArray 方法只对前两个数字进行排序?