【发布时间】：2022-01-26 22:27:40
【问题描述】：
我想学习 Bootstrap5，并且我需要能够访问 Bootstrap5 中的所有调色板。我查看了文档，但我没有意识到如何将 scss / variables.scss 文件中的所有颜色带入我可以使用 Web 编译器编译的自定义文件（我使用 Visual Studio 2019）并且我可以使用它在我的项目中进一步作为文本颜色或背景颜色。 到目前为止，我尝试过的如下：
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
$blues : ( "100": $blue-100, "200": $blue-200, "300": $blue-300, "400": $blue-400, "500": $blue-500, "600": $blue-600, "700": $blue-700, "800": $blue-800, "900": $blue-900) !default;
$indigos: ( "100": $indigo-100, "200": $indigo-200, "300": $indigo-300, "400": $indigo-400, "500": $indigo-500, "600": $indigo-600, "700": $indigo-700, "800": $indigo-800, "900": $indigo-900) !default;
$purples: ( "100": $purple-100, "200": $purple-200, "300": $purple-300, "400": $purple-400, "500": $purple-500, "600": $purple-600, "700": $purple-700, "800": $purple-800, "900": $purple-900) !default;
$pinks: ( "100": $pink-100, "200": $pink-200, "300": $pink-300, "400": $pink-400, "500": $pink-500, "600": $pink-600, "700": $pink-700, "800": $pink-800, "900": $pink-900) !default;
$reds: ( "100": $red-100, "200": $red-200, "300": $red-300, "400": $red-400, "500": $red-500, "600": $red-600, "700": $red-700, "800": $red-800, "900": $red-900) !default;
$oranges: ( "100": $orange-100, "200": $orange-200, "300": $orange-300, "400": $orange-400, "500": $orange-500, "600": $orange-600, "700": $orange-700, "800": $orange-800, "900": $orange-900) !default;
$yellows: ( "100": $yellow-100, "200": $yellow-200, "300": $yellow-300, "400": $yellow-400, "500": $yellow-500, "600": $yellow-600, "700": $yellow-700, "800": $yellow-800, "900": $yellow-900) !default;
$greens: ( "100": $green-100, "200": $green-200, "300": $green-300, "400": $green-400, "500": $green-500, "600": $green-600, "700": $green-700, "800": $green-800, "900": $green-900) !default;
$teals: ( "100": $teal-100, "200": $teal-200, "300": $teal-300, "400": $teal-400, "500": $teal-500, "600": $teal-600, "700": $teal-700, "800": $teal-800, "900": $teal-900) !default;
$cyans: ( "100": $cyan-100, "200": $cyan-200, "300": $cyan-300, "400": $cyan-400, "500": $cyan-500, "600": $cyan-600, "700": $cyan-700, "800": $cyan-800, "900": $cyan-900) !default;
@each $key, $value in $blues {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $purples {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $indigos {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $pinks {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $reds {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $oranges {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $yellows {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $greens {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $teals {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@each $key, $value in $cyans {
.bg-blue-#{$key}{
background-color: $value !important;
}
.text-blue-#{$key}{
color: $value !important;
}
}
@import '~bootstrap/scss/bootstrap';
我发现我在我的 custom.scss 文件中应用了这段代码，然后我编译了该代码，并在我的 custom.css 文件中添加了我需要的所有调色板，但是当我这样做时发生了错误。我从 Bootstrap5 中获得了所有这些颜色，但是我之前添加的颜色消失了。
我按照文档中的步骤进行操作，在我的项目中安装了 bootstrap5，我有一个 scss 文件夹，我将 custom.scss 文件与 bootstrap 中的 scss 文件夹分开存放
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
我的问题是：将引导调色板带入我的自定义文件以便我可以在项目中进一步使用它们的最简单和最干净的方法是什么？ （因为我使用 vs2019 和 web 编译器）。 提前谢谢你。
【问题讨论】：
标签： c# html css twitter-bootstrap sass