1

Hi Stackoverflow Fans,

how can I @extend bootstrap classes using customized colors ?

Firstly, I created my customised colors in my custom-bootstrap.scss:

$theme-colors: (
  'primary': #3b86ff,
  'secondary': #6c757d,
  'success': #28a745,
  'error': #dc3545,
  'white': #FFFFFF,
  // Neutrals
  'grey-0': #f9f9fa,
  'grey-1': #eceef0,
  'grey-2': #dee1e5,
  'grey-3': #cfd3da,
  'grey-4': #bfc4cd,
  'grey-5': #adb3bf,
  'grey-6': #98a0ae,
  'grey-7': #828a97,
  'grey-8': #666d77,
  'grey-9': #3c3f46
);

Now I want to create some customized classes based on (that extends) Bootstrap classes. For example:

The class below compiles and works

.my-info-card {
  @extend .card, .bg-light, .border, .bg-secondary, .text-dark;
}

The class below does NOT compile

.my-info-card2 {
 @extend .card, .border-gray-5, .m-3, .mt-2;
}

I get a compilation error:

SassError: The target selector was not found. Use "@extend .border-gray-5 !optional" to avoid this error. ╷ 130 │ @extend .card, .border-gray-5, .m-3, .mt-2; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The code below works as expected, but I want replace the css class by my-info-card2:

<div class="card border-gray-5 m-3 mt-2">
joccafi
  • 78
  • 9
  • Are you `@import`ing the custom variables file? – nschonni Sep 18 '20 at 16:49
  • where is `border-gray-5` defined? – Carol Skelly Sep 18 '20 at 16:59
  • @nschonni I am customizing the bootstrap 4.1 I am doing everything right. See here: https://getbootstrap.com/docs/4.1/getting-started/theming/ – joccafi Sep 18 '20 at 17:02
  • @Zim ```border-gray-5``` is automatically created by Bootstrap because I defined the color ```gray-5``` in the ```$theme-colors```. Bootstrap does the rest in its thousand scss files when it is compiled. – joccafi Sep 18 '20 at 17:06

1 Answers1

1

You defined border-grey-5 not border-gray-5. This is how you would create a new theme color named grey-5 and extend one of the generated classes:

$theme-colors: (
  "primary": #7400d9,
  "grey-5": #adb3bf,
);

.my-info-card2 {
   @extend .card, .border-grey-5, .m-3, .mt-2;
}

Codeply

Also see:
How to extend/modify (customize) Bootstrap 4 with SASS
How to change the bootstrap primary color?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624