如何在我的 .Net 项目中使用 Bootstrap 5 种颜色？

Question

我想学习 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

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

我的问题是：将 bootstrap 调色板添加到我的自定义文件以便我可以在项目中进一步使用它们的最简单和最干净的方法是什么？（因为我使用 vs2019 和网络编译器）。提前谢谢你。

Answer 1

在您的 scss 文件夹中创建 main.scss 文件；
覆盖 Custom.scss 文件中的默认 BS5 变量（以保持清晰）；
导入 Custom.scss 以上默认 BS5 变量；

main.scss 文件:

// Configuration
@import "~bootstrap/scss/functions";
// Override BS5 variables
@import "./variables";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// Override BS5 utilities
@import "./utilities";
@import "~bootstrap/scss/utilities";


// Import full Bootstrap package
@import '~bootstrap/scss/bootstrap';

// or import parts of Bootstrap package separately
// Layout & components
// @import "~bootstrap/scss/root";
// @import "~bootstrap/scss/reboot";
// @import "~bootstrap/scss/type";
// @import "~bootstrap/scss/images";
// @import "~bootstrap/scss/containers";
// @import "~bootstrap/scss/grid";
...

您的Custom.scss文件：

（您可以覆盖 ~bootstrap/scss/variables 中的任何变量，但删除 !default 后缀）

$blue:    #0d6efd !default;

$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;

$blues : ( "100": $blue-100, "200": $blue-200, "300": $blue-300, "400": $blue-400);
...

$blue-100、$blue-200、$blue-300、$blue-400 也应该在 Custom.scss 文件中定义。您也可以删除 !default 后缀来覆盖它；

或者你可以创建_bs-variables.scss文件，复制~bootstrap/scss/variables.scss文件中的内容，评论它的内容，稍后你可以轻松访问你需要的任何 BS 变量，也应该在默认 BS5 变量之上导入：

// // Variables
// //
// // Variables should follow the `$component-state-property-size` formula for
// // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// // Color system

// // scss-docs-start gray-color-variables
$white:    #fff !default;
// $gray-100: #f8f9fa !default;
// $gray-200: #e9ecef !default;
$gray-300: #A0A0A0;//#dee2e6 !default;
// $gray-400: #ced4da !default;
// $gray-500: #adb5bd !default;
// $gray-600: #6c757d !default;
// $gray-700: #495057 !default;
$gray-800: #333333; //#343a40 !default;
$gray-900: #334550; //#212529 !default;
// $black:    #000 !default;
// // scss-docs-end gray-color-variables

// // fusv-disable
// // scss-docs-start gray-colors-map

如何在我的 .Net 项目中使用 Bootstrap 5 种颜色？

How to use Bootstrap 5 colors in my .Net project?

html

css

c#

sass

twitter-bootstrap