0

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?

Dexter Siah
  • 273
  • 2
  • 6
  • 17

1 Answers1

1

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

s4k1b
  • 2,955
  • 1
  • 7
  • 14
  • A quick note: `node_modules/bootstrap/scss/bootstrap` also imports `functions`, `mixins` and `variables`, so they don't need to be explicitly imported. – Hiws Jun 10 '20 at 08:15
  • Thank you that worked however I was so confused I was following this (https://stackoverflow.com/questions/45776055/how-to-extend-modify-customize-bootstrap-4-with-sass) it mentioned to import the variables first... – Dexter Siah Jun 10 '20 at 08:19