Bootstrap Vue自定义Sass变量编译后样式不生效如何解决？

问题核心原因 #

你当前的配置存在三个关键错误，导致自定义变量被覆盖不生效：

• main.js中重复引入了预编译完成的bootstrap、bootstrap-vue css文件，编译后优先级高于你的自定义scss，直接覆盖了变量修改效果
• 错误使用Vue.use(styles)导入样式文件，Vue.use仅用于注册Vue插件，不能用于导入样式
• 同时在main.js和App.vue中重复引入自定义scss，产生冗余引入

解决方案 #

第一步：清理main.js中的错误代码 #

删除冗余的样式导入和错误的插件注册逻辑，修改后的main.js代码如下：

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'

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

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

第二步：确认自定义scss的变量定义顺序 #

你当前的main.scss编写逻辑是正确的：所有自定义变量放在bootstrap、bootstrap-vue的scss导入之前定义即可，bootstrap内置变量都带有!default标记，只要提前自定义就会覆盖默认值，不需要修改node_modules中的源码。

第三步：重启开发服务器 #

修改完成后重启本地开发服务，清除编译缓存即可看到样式生效。

内容的提问来源于stack exchange，提问作者luther wardle