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

Question

我的Bootstrap在我的Vue项目中正常工作。我想使用Bootswatch的主题。在我的Vue项目中，我将node_modules / bootstrap / dist / bootstrap.min.css文件替换为我从Bootswatch站点下载的文件。但新主题并没有改变任何东西。注意：在我的main.js中，我有以下内容：

导入＆＃39; bootstrap＆＃39;

如何正确使新主题发挥作用？

Answer 1

您应该在main.js中导入css文件，如下所示

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

确保您已将网络包配置为使用css-loader

或

在根组件（主要是App.vue）中添加两个样式标记，一个用于全局样式，另一个用于范围样式（如果您有任何带有范围属性）。请参阅src imports.

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

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

Answer 2

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

Answer 3

• 首先安装一些依赖项：
  spring.data.mongodb.uri=mongodb://localhost:27017/foo

  ---

• 然后将以下行添加到入口点文件yarn add bootstrap bootswatch jquery popper.js中：
  main.js
  

    

  import "bootstrap"; import "../node_modules/bootswatch/dist/lux/bootstrap.min.css"; import "jquery"; import "popper.js"; 是主题名称，因此您可以将其替换为您的主题   选择。