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 :)