reactjs - 自定义颜色主题在 Bootstrap、React、SCSS 项目中无法正常工作
问题描述
我正在尝试在我的 bootstrap/react/scss 设置中使用自定义颜色。我使用的自定义颜色是“清晰”。奇怪的是,在按钮组件上使用 className="btn-clear" 确实使按钮具有自定义颜色(正确的行为),但在 div 上使用 className="bg-clear" 只会使 div 变为白色,而不是自定义颜色(不正确行为)。所以自定义颜色似乎有效,但仅适用于 btn- 类。
Node-sass 并没有被 sass 取代。
这与我导入模块的顺序有关吗?
我正在使用将 custom.scss 导入我的主应用程序import '../../scss/custom.scss'
自定义.scss
@import './vendors/bootstrap';
_bootstrap.scss
// Required
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/_variables';
// Import Overrides here
@import 'scss/themes/_bootstrap_overrides';
// Configuration
@import 'node_modules/bootstrap/scss/_utilities';
@import 'bootstrap/scss/_mixins';
// Layout & components
@import '../../../node_modules/bootstrap/scss/_root';
@import '../../../node_modules/bootstrap/scss/_reboot';
@import '../../../node_modules/bootstrap/scss/_type';
@import '../../../node_modules/bootstrap/scss/_containers';
@import '../../../node_modules/bootstrap/scss/_grid';
@import '../../../node_modules/bootstrap/scss/_forms';
@import '../../../node_modules/bootstrap/scss/_buttons';
@import '../../../node_modules/bootstrap/scss/_transitions';
// Helpers
@import '../../../node_modules/bootstrap/scss/_helpers';
// Utilities
@import '../../../node_modules/bootstrap/scss/utilities/_api';
_bootstrap_overrides.scss
$custom-colors: (
'gray': $gray-600,
'clear': #73bae1,
'clear-light': #c4e2f2,
'clear-dark': #54a6dc,
);
// Merge with bootstrap theme
$theme-colors: map-merge($theme-colors, $custom-colors);
包.json
{
"name": "",
"version": "0.1.0",
"private": true,
"homepage": "",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.3",
"luxon": "^1.26.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.2.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.2.1",
"sass": "^1.43.2"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
提前致谢!
解决方案
事实证明这是一个引导程序 5 的问题。在它正常工作之前,下面有一个解决方法。资源
_bootstrap.scss
@import "../../node_modules/bootstrap/scss/variables";
$theme-colors: map-merge($theme-colors, (
'primary-dark' : shade-color($blue, 20%),
'primary-light' : tint-color($blue, 20%),
'purple' : $indigo,
'purple-dark' : shade-color($indigo, 20%),
'purple-light' : tint-color($indigo, 10%),
));
$utilities-colors: map-merge($theme-colors, $utilities-colors);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";
// and the rest of your Bootstrap components
推荐阅读
- javascript - 无法从另一个函数中调用一个函数
- c# - 何时在 C# 中声明有关效率/速度的变量
- answer-set-programming - lparse/cligo:怎么说 AllOf(a,b,c) :- 条件?
- python - 如何在 Python 3 中使用 Beautiful Soup 修改子元素
- javascript - 如何为网页制作一次性弹出窗口?
- excel - 循环遍历表并提取某些值
- python - 'python2' 未被识别为内部或外部命令。视窗 10
- python - python设计模式队列与工人
- javascript - snapshot.docChanges() 在 Firebase Firestore 中不起作用
- r - issues with Iterating over f(x, y) using map2_