在vue-cli中使用Bootstrap-Vue

1、安装bootstrap-vue、bootstrap @4.x版本

npm install bootstrap-vue
npm install bootstrap@4.6.0 --save --save-exact

2、main.js中引入

//此处省略引入vue
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

3、引入后即可使用使用

注意事项

1. –save-exact 是固定版本 防止下次安装依赖会升级
2. bootstrap-vue 不适配 bootstrap5.x，所以要固定版本安装4.x版本
3. vue中使用sass预编译器也需要在main.js中引入 如果在.scss主样式文件中引入会报scss变量未定义错误 （ps:博主暂时未找到完全定义变量的.scss文件只推荐main.js中引入方式）
4. sass-loader版本不一样在vue.config.js文件配置的loaderOptions键名也不相同¹

---

1. 在 sass-loader v7 中，这个选项名是 “data”
   V8: “prependData”
   V10+: “additionalData” ↩︎