bootstrap vue custom sass compiles but does not change variable

currently I’m trying to override some vue-bootstrap styles, I have my own custom scss file importing my bootstrap and bootstrap vue scss, and I am using it inside main.js, even though my sass compiles I am not seeing any changes in my dev server and I’m at a loss

main.scss (my file) -> trying to change the primary variable to a different color

//custom sass
$primary: #0dcaf0;

//bootstrap sass import
@import '../node_modules/bootstrap/scss/bootstrap';
// BootstrapVue and its default variables
@import '../node_modules/bootstrap-vue/src/index.scss';

App.vue (including sass import here, also for some reason if I dont set lang=scss I get an error where webpack can’t read the sass comments and throws an unknown word error)

<style lang="scss">
@import '../sass/main.scss';

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>

main.js (i’ve included everything in the file just because I don’t know if the order matters)

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import styles from '../sass/main.scss';

Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(styles)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

I’ve been at this for a bit so I’ll try to give a history of what I’ve tried

I have tried editing the $primary variable in node_modulesbootstrapscss_variables.scss I have tried editing the $primary variable in node_modulesbootstrap-vuenode_modulesbootstrapscss_variables.scss

I have also tried changing the color directly, I have tried removing the !default modifier

versions bootstrap 4.6.0 sass-loader is 10.2.0

I’m thinking my main.scss needs to specify somehow whether its editing the $primary variable in bootstrap or in bootstrap-vue ….. I’m not sure how I can do this? hoping someone has some insight

many thanks 🙂

Answer

You’re still including the base .css files from both Bootstrap and BootstrapVue. So they will overwrite anything you define in your SCSS.

So remove those two imports from your main.js and it should work.

// remove these from main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

You also have this Vue.use(styles) which doesn’t make sense, since you should only use Vue.use on vue plugins, so you should remove that as well. Which means you can change your import toimport '../sass/main.scss';

Whether you import main.scss in main.js or App.vue is up to you. But you should only have one or the other, not both.