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

I want to learn Bootstrap5 and I got to the part where I would need to be able to access all the color palettes in Bootstrap5. I looked over the documentation, but I didn't realize how I could bring all the colors from the scss / variables.scss file into my custom file that I could compile with Web Compiler (I use Visual Studio 2019) and I can use it further in my project as text-color or bg-color. what I've tried so far has been the following :

@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';

I found this code that I applied in my custom.scss file which I then compiled, and in my custom.css file all the color palettes I needed were added, but then an error occurred when I did that. I had all these colors from Bootstrap5, but the previous colors that I added disappeared.

I followed the steps in the documentation, and in my project I have bootstrap5 installed, I have a scss folder in which I keep my custom.scss file separate from the scss folder in bootstrap

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

My question is: What is the easiest and cleanest way to bring bootstrap color palettes to my custom file so I can use them further in the project? (Since I use vs2019 and web compiler). thank you in advance.

CodePudding user response：

Create main.scss file in your scss folder;
Override default BS5 variables in your Custom.scss file (to keep it clear);
Import Custom.scss above of default BS5 variables;

main.scss file:

// 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";
...

Your Custom.scss file:

(you can override any variable from ~bootstrap/scss/variables, but remove !default suffix)

$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 should be defined in Custom.scss file too. You can also remove !default suffix to override it;

Or you can create _bs-variables.scss file, duplicate content from ~bootstrap/scss/variables.scss file, comment it's content and later you can easily access any BS variable you need, also should be imported above of default BS5 variables:

// // 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