CODEWITHSUNDEEP
cssvue.jsbootstrap-vue
StrangeQuark
StrangeQuark

Reputation: 13

Bootstrap-vue styling not applying correctly

I am having a lot of trouble getting bootstrap-vue working. See the image of what happens when I copy and paste the navbar component from the boostrap-vue.js.org. Bits and pieces are missing and I don't understand why. When I create b-links I can create router links that work but they have zero styling. The primary button seems to be OK but then often buttons don't look correct and radios are invisible. Basically something is not right.

boostrap vue navbar example

vue navbar screenshot

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

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

Upvotes: 0

Views: 4416

Answers (1)

Fifciuu
Fifciuu

Reputation: 864

Make sure you have both vue-style-loader and css-loader in package.json

Check this post

Upvotes: 1

Related Questions