Fixes #36534 (closed)
This PR proposes to fix #36534 (closed) by modifying the Scss example and the associated description (not very inspired, could maybe be improved).
Maybe $theme-colors
is not representative enough of what's this section is trying to explain. Do we need to find another example based on another map?
Live preview
How to test it locally:
mkdir test && cd test
npm i bootstrap@5.2.0-beta1 sass
// styles.scss
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "./node_modules/bootstrap/scss/maps";
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/root";
@import "./node_modules/bootstrap/scss/utilities";
@import "./node_modules/bootstrap/scss/reboot";
@import "./node_modules/bootstrap/scss/helpers";
@import "./node_modules/bootstrap/scss/utilities/api";
# Generate styles.css
./node_modules/.bin/sass styles.scss:styles.css
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<div class="bg-info">test</div>
<div class="bg-warning">test</div>
</body>
</html>
If the modification of $theme-colors
is done after root
you'll observe a blue div. If it is done at the right place between variables
and maps
, only the yellow div will be displayed.