#reactjs #sass #bootstrap-5
Вопрос:
Я пытаюсь использовать пользовательские цвета в настройках bootstrap / react / scss. Пользовательский цвет, который я использую, «чистый». Как ни странно, использование className=»btn-clear» в компоненте кнопки делает кнопку в пользовательском цвете (правильное поведение), но использование className=»bg-clear» в div просто оставляет div белым, а не пользовательским цветом (неправильное поведение). Таким образом, пользовательский цвет, похоже, работает, но только для btn-классов.
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 amp; 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"
}
}
}
Заранее спасибо!
Ответ №1:
Оказывается, это проблема bootstrap 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