28

It's bootstrap 4.0 with SASS

My style.scss file contains the following code:

@import "../bootstrap/scss/bootstrap";

@import "colors";
@import "main";

and _colors.scss file contains the following code:

$bg-white : white;

$theme-colors: (
        primary: #333333
)

You can see that I am just trying to override the $theme-color('primary') but the problem is this that it does nothing.

And If I shift @import "colors" in the start of the file style.scss It gives me following error:

error ../bootstrap/scss/_forms.scss (Line 284: $color: null is not a color for `rgba')

Actually, the style.scss file compiles to style.css file and that one is linked file.

Question: How I can override the $theme-color in bootstrap-4 when using SASS?

Any help will be appreciated, and Thanks in advance

Cheers.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Syed Aqeel
  • 1,009
  • 2
  • 13
  • 36

4 Answers4

37

Update 2021 for Bootstrap 5

Per the guidance in the docs...

"Variable overrides must come after our functions are imported, but before the rest of the imports."

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss

/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';

Demo: https://www.codeply.com/go/lobGxGgfZE

Also see this answer

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I have try this with latest v4.1.2. but, I get error this `Error: File to import not found or unreadable: utilities/screenreaders.` how can i resolved? Thanks. – HDP Jul 23 '18 at 05:46
  • 1
    @HDP Instead of importing functions and variables, do that `@import "~bootstrap/scss/bootstrap-reboot";` – Michael W. Czechowski Oct 17 '18 at 11:17
  • @MichaelCzechowski - that works too but it also adds mixins which is unnecessary for theme-colors customization. – Carol Skelly Oct 17 '18 at 13:27
  • It is bit a shame, that bootstrap does not provide a simple guideline for implementing customizations. @Zim you're right. Now I changed my method. – Michael W. Czechowski Oct 20 '18 at 18:20
  • 2
    I believe you need to remove the semi-colon after #333333. Throws an error for me. – wuliwong Nov 13 '18 at 20:21
  • Starting in bootstrap 5.2, there is a _map.scss which needs to be imported after defining new variables. $theme-colors-rgb and $utilities-text are defined in this _map.scss – anjanesh Jun 21 '22 at 10:09
  • The docs implied that assigning the `$theme-colors` variable would override the defaults. Had to assign each color top-level. – MegaSpaceHamlet Dec 09 '22 at 15:25
12

This got me too. You need to import functions.scss into your scss file before variables.

@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

Your paths may differ.

This is with Bootstrap 4 Beta 1.

micah
  • 1,937
  • 6
  • 27
  • 40
Steve
  • 14,401
  • 35
  • 125
  • 230
  • This is the answer I was finding out for myself as well. Without the functions above variables, it does not compile `theme-color("primary")` correctly because there's a function called `theme-color` inside of functions. – micah Sep 28 '17 at 18:22
  • 2
    Confirmed doesn't seem to work at the moment. In fact when I try this it still throws the error. – M. Ryan Nov 16 '17 at 17:26
8

None of the solutions provided work. Some are close and will update the color use on most elements, but not all elements. I have tried them all (and every other alternative I can find on StackOverflow and other websites, but those solutions only affect the elements that are specifically referencing the color property and does not update those using the theme-color function to get the color.

The expected solution (and recommended by others) is

/* import only the necessary Bootstrap files */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary and secondary colors to AAA standards */
$theme-colors: (
  primary: #004C9E
);

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

But this leaves 15 occurences of #007bff (the normal blue/primary color) throughout the generated custom.css. Examples of it occur in the pagination section, e.g.

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

By setting both the $colors and the $theme-colors custom properties after the import of the functions.scss, and placing the statement to import the variables.scss AFTER these changes appears to set the new colors throughout. I presume that by setting these variables specifically, the bootstrap variables cannot override them.

@import "../../node_modules/bootstrap/scss/functions";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary color to AAA standards */
$theme-colors: (
  primary: #004C9E
);

@import "../../node_modules/bootstrap/scss/variables";

/* put other customization in here */

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

The may not seem right, but it does appear to work. I'm not a SASS expert, so maybe someone else could explain this better. I hope this helps anyone who may still be struggling to solve this issue.

Phil Moir
  • 121
  • 1
  • 6
2

I'm assuming that you have installed Bootstrap 4 beta using npm and you wish to customize the Bootstrap SCSS without modifying the source in node_modules.

The way I do it is by overriding the Bootstrap variables contained in variables.scss:

app-styles.scss

// Custom SCSS variables I wish to override (see below)
@import 'assets/styles/variables';

// Bootstrap 4 from node_modules
@import '~bootstrap/scss/bootstrap.scss';

variables.scss

$theme-colors: (
    primary: $trump-hair,
    secondary: $gandalf-hat,
    success: $my-favorite-color,
    info: #FBC02D,
    warning: #FF5722,
    danger: $color-of-melena,
    light: #1B5E20,
    dark: $bile-green
);

The way to override bootstrap theme colors is actually due to be changed in the upcoming beta 2. The current requirement is that you have to include the entire theme-colors Sass map when overriding. In the current beta, failure to include the entire Sass map will result in:

Argument $color of darken($color, $amount) must be a color

Please see this Github issue and this Codepen for more information, and an example of how you will be able to override theme colors in beta 2.

Blake Mumford
  • 17,201
  • 12
  • 49
  • 67