Unable to override $theme-color in bootstrap 4

问题:

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.

回答1:

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

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

---

Also see this answer

回答2:

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.

回答3:

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.