bootstrap vue custom sass compiles but does not change variable

Question

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_modules\bootstrap\scss_variables.scss I have tried editing the $primary variable in node_modules\bootstrap-vue\node_modules\bootstrap\scss_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 :)

bootstrap-vue.org/docs/reference/theming

Vitaliy Rayets
– Vitaliy Rayets

2021-09-15 15:53:34 +00:00
Commented Sep 15, 2021 at 15:53 — Vitaliy Rayets
– Vitaliy Rayets, Commented Sep 15, 2021 at 15:53

Hiws · Accepted Answer · 2021-09-15 07:04:31Z

1

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.

answered Sep 15, 2021 at 7:04

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

luther wardle Over a year ago

ah I see, thank you for explaining it to me, using this I was able to remove the imports and get it working :)

Collectives™ on Stack Overflow

bootstrap vue custom sass compiles but does not change variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related