我这周刚开始学习Bootstrap 5，对CSS的知识知之甚少，所以我对它的大部分工作原理还是很无知的。我使用npm成功地将bootstrap安装到一个演示项目中，但我想知道如何在_variable中使用扩展的颜色集。SCSS文件(blue-100, blue-200, blue-300等)。我希望我能做一些类似于你可以用Tailwind做的事情，比如:
<body class="bg-gray-200">
…但这似乎并不那么容易。有没有简单的方法可以做到这一点?
我假设您想使用SCSS并对其进行编译。在这种情况下，您可以在@include "variables";和"utilities"之后添加自己的变体，如下所示:
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
@import "your_own_cool_stuff"; // ** your file goes here
// Layout & components
@import "root";
// ... and so on
然后您需要附加到单个$utilities变量…参见实用API -使用BS5文档中的API…像这样:
// ** contents of your file
$your_awsome_colors = (
"gray-100": #eee,
"gray-200": #ddd
// and so on...
) !default;
// use API to merge background-color
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
$utilities,
(
"background-color": map-merge(
map-get($utilities, "background-color"),
(
values: map-merge(
map-get(map-get($utilities, "background-color"), "values"), $your_awsome_colors,
),
),
),
)
);
最后，当…
// Utilities
@import "utilities/api";
. .