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
_variable.scss
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
.scss
comes after the bootstrap stuff is loaded, yet them custom colours of mine aren't showing!

Here is the structure of the partials:

styles.scss


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

@import "custom/myappstyles";


myappstyles.scss


@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