CODEWITHSUNDEEP
vue.jsbootstrap-4
Dexter Siah
Dexter Siah

Reputation: 333

Bootstrap Theming Not Replacing

Hey I have a problem here which I have no idea what is going on. I am trying to change the colors from bootstrap using SCSS however it is not working whenever i run npm run serve in my Vue project.

These are in my files

custom_bootstrap.scss

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "_config.scss";

$primary: $primary-color-red;

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

_config.scss

//Color Palette
$primary-color-red: #C00800; 
$primary-text: #666666;
$main-text: #8F8F8F;

//Font Size
$main-fontsize: 15px;

main.scss

@import 'custom_bootstrap';

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

main.js

...
import 'bootstrap';
import './assets/styles/main.scss';
...

As you can see I am trying to change the color of $primary to a value from _config.scss. However when I ran npm run serve the color remains the default blue. Anyone able to help?

Upvotes: 0

Views: 33

Answers (1)

s4k1b
s4k1b

Reputation: 3095

You have to import the bootstrap and it's default variables after overriding it.

More about it here, https://bootstrap-vue.org/docs/reference/theming

custom_bootstrap.scss


@import "_config.scss";

$primary: $primary-color-red;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/bootstrap";

Try that, and see if it works

Upvotes: 1

Related Questions