Ciwan Ciwan - 4 years ago 121
Sass (Sass) Question

SASS: Override bootstrap's default primary, success, info ..etc colours

I am working in Visual Studio Code. I am using Gulp / Node to compile my SASS.

Things are working well, but for some reason I can't override this in Bootstrap:

$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;

In my own
I have the following:

$brand-primary: darken(#428bca, 6.5%)
$brand-success: #0aa699;
$brand-info: #1f3853;
$brand-warning: #fbb05e;
$brand-danger: #f35958;
$brand-grey: #d1dade;

And I am ensuring that all my custom
comes after the bootstrap stuff is loaded, yet them custom colours of mine aren't showing!

Here is the structure of the partials:


@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

@import "custom/myappstyles";


@import "modules/variables";

@import "modules/mixins";

@import "modules/layout";

@import "modules/typography";

@import "modules/forms";

@import "modules/buttons";

@import "modules/tables";

@import "modules/navigation-sidebar";

@import "modules/approval-sidebar";

Any ideas?

Answer Source

Could you write down your structure and imports?

UPDATE: Try to put variables before bootstrap import.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download