Importing components and css separately in vue.js

You could look at bootstrap-vue as a bunch of functional components someone wrote to wrap around bootstrap styling (from what I make of it). You only have to import the bootstrap-vue npm package, then tell Vue to use it (Vue will use the bootstrap-vue package as a plugin by way of Vue.use())

That gives you access to things like <b-link>, etc.. but you still have to import the .css files..

This is where you need the original bootstrap.css file, plus the bootstrap-vue.css file, in order to get the appropriate styling on the imported <b-*> components.. (that you imported above).

Therefore, your entry point should look like this at the end of the day:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

You can still use regular classes to style the custom components, but it is important to note these <b-*> components are different than regular HTML elements. They come with properties and certain options that allow you to style them how you would like.

Here is an example of using regular classes on a component..

Instead of doing something like <button class="btn btn-success">Button</button> you would do: <b-button variant="success">Button</b-button>

You can read more on how bootstrap-vue handles color variants, etc here - all in all, I would read their documentation to get a better grasp of it.