Bootstrap-vue 样式未正确应用答案

【问题标题】：Bootstrap-vue styling not applying correctlyBootstrap-vue 样式未正确应用
【发布时间】：2019-02-26 21:44:57
【问题描述】：

我在让 bootstrap-vue 工作时遇到了很多麻烦。查看当我从 boostrap-vue.js.org 复制和粘贴导航栏组件时发生的情况。点点滴滴都不见了，我不明白为什么。当我创建 b 链接时，我可以创建有效的路由器链接，但它们的样式为零。主按钮似乎没问题，但通常按钮看起来不正确并且收音机是不可见的。基本上有些不对劲。

boostrap vue navbar example

vue navbar screenshot

包.json

  "dependencies": {
      "bootstrap": "^4.0.0-alpha.6",
      "bootstrap-vue": "^2.0.0-rc.11",
      "vue": "^2.5.17",
      "vue-router": "^3.0.1",
      "vuex": "^3.0.1"
   },
    "devDependencies": {
      "@babel/core": "^7.1.0",
      "@fortawesome/fontawesome-free": "^5.3.1",
      "@vue/cli-plugin-babel": "^3.0.3",
      "@vue/cli-plugin-eslint": "^3.0.3",
      "@vue/cli-service": "^3.0.3",
      "node-sass": "^4.9.3",
      "sass-loader": "^7.1.0",
      "vue-template-compiler": "^2.5.17"

main.js

 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

 Vue.use(BootstrapVue);

 Vue.config.productionTip = false

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

【问题讨论】：

标签： css vue.js bootstrap-vue

【解决方案1】：

确保你在 package.json 中有 vue-style-loader 和 css-loader

Check this post

【讨论】：

我修好了，这两个我都有，问题是由于某种原因，当我安装 bootstrap 时它安装了 bootstrap 4.0 而 bootstrap-vue 预期为 4.1.3
终于找到答案了谢谢。文档说你只是通过运行npm install vue bootstrap bootstrap-vue 来安装它，但这并没有安装 bootstrap-vue 需要的特定版本。现在是 bootstrap@4.5.3。