1

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?

Mose
  • 69
  • 3
  • 7

4 Answers4

3
  • Start by installing some dependencies:
    yarn add bootstrap bootswatch jquery popper.js
  • Then add this lines to your entry point file main.js:
    import "bootstrap"; import "../node_modules/bootswatch/dist/lux/bootstrap.min.css"; import "jquery"; import "popper.js";

    lux is a theme name, so you can replace it with a theme of your choice.

Choupi
  • 31
  • 3
2

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>
Vamsi Krishna
  • 30,568
  • 8
  • 70
  • 78
  • This worked, but I had to alter the path slightly. I added this to my main.js file: import '../node_modules/bootstrap/dist/css/bootstrap.min.css' – Mose Mar 10 '18 at 23:07
1

Try clearing your browser cache and restarting whatever vue is running on

Brett M
  • 178
  • 6
0

if you want to use npm...

npm install bootstrap bootswatch jquery popper.js

Then add this lines to your entry point file main.js:

import "bootstrap";
import "../node_modules/bootswatch/dist/theme/bootstrap.min.css";
import "jquery";
import "popper.js"

replace theme with your theme (journal,lux...)
HOUNFODJI
  • 1
  • 2