自定义颜色主题在Bootstrap, React, SCSS项目上不能正常工作

Question

我试图使用自定义颜色与我的bootstrap/react/scss设置。我使用的自定义颜色是"clear"。奇怪地使用className="btn-clear"在按钮组件上使按钮使用自定义颜色(正确的行为)，但是使用className="bg-clear"在div上只留下div白色，而不是自定义颜色(不正确的行为)。因此，自定义颜色似乎是有效的，但只适用于btn- classes。

Node-sass无法构建，因此被sass取代。

是否与我导入模块的顺序有关?

我正在导入custom。scss到我的主应用程序使用import '../../scss/custom.scss'

custom.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);

package.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"
}
}
}

提前感谢!

Answer 1

原来这是一个引导问题。在它正常工作之前，下面有一个解决方案。源

_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

Answer 2

你可以试试这个函数，然后。bg-clear就可以工作了。

@mixin color-modifiers($attribute) {
@each $name, $hex in $custom-colors {
&-#{$name} {
#{$attribute}: $hex !important; //important is optional
}
}
}
.bg {
@include color-modifiers(background-color);
}