How do I add a Bootswatch theme to a Vue project?

Question

I have Bootstrap working properly in my Vue project. I would like to use a theme from Bootswatch. In my Vue project, I replaced the node_modules/bootstrap/dist/bootstrap.min.css file with one that I downloaded from the Bootswatch site. But the new theme didn't change anything. Note: In my main.js I have the following:

import 'bootstrap'

How do I properly get the new theme to work?

Answer 1

You should import the css file in main.js as follows

import '../node_modules/bootstrap/dist/bootstrap.min.css'

Make sure you have configured your webpack to use css-loader

or

In your root component(mostly App.vue) add two style tags , one for global styles and other for scoped styles if you have any with the scoped attribute.See src imports.

<style src='path/to/node_modules/bootstrap/dist/bootstrap.min.css'>
    /* global styles */
</style> 

<style scoped>
    /* local styles */
</style>