如何将 Bootswatch 主题添加到 Vue 项目？

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> 

Answer 2

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

Answer 3

尝试清除浏览器缓存并重新启动正在运行的任何vue

Answer 4

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