Bootstrap-Vue样式未正确应用

时间:2018-09-22 22:25:41

标签: css vue.js bootstrap-vue

我无法顺利启动Bootstrap-Vue。查看当我从boostrap-vue.js.org复制并粘贴导航栏组件时发生的图像。零零碎碎,我不明白为什么。当我创建b链接时,我可以创建可用的路由器链接,但它们的样式为零。主按钮似乎没问题,但通常情况下按钮看起来不正确,并且收音机不可见。基本上有些不对。

布尔型vue导航栏示例

vue导航栏屏幕截图

Package.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

 从'vue'导入Vue;
 从'bootstrap-vue'导入BootstrapVue;
 从“ ./App.vue”导入应用;
 从'./router'导入路由器;
 从“ ./store”导入商店;
 导入'bootstrap / dist / css / bootstrap.css';
导入'bootstrap-vue / dist / bootstrap-vue.css';

 Vue.use(BootstrapVue);

 Vue.config.productionTip =否

 新Vue({
    路由器,
   商店,
   渲染:h => h(App)
  })。$ mount('#app')
 

1 个答案:

答案 0 :(得分:0)

确保package.json中同时包含vue-style-loader和css-loader

Check this post