CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootswatch
Mose
Mose

Reputation: 79

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

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?

Upvotes: 1

Views: 3718

Answers (4)

HOUNFODJI
HOUNFODJI

Reputation: 1

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

Upvotes: 0

Choupi
Choupi

Reputation: 31

  • 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. 😎

Upvotes: 3

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

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>

Upvotes: 2

Brett M
Brett M

Reputation: 178

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

Upvotes: 1

Related Questions