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

Question

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

进口'bootstrap'

如何正确使用新主题？

Answer 1

尝试清除浏览器缓存并在

上重新启动任何运行的 vue

Answer 2

您应该按如下方式在 main.js 中导入 css 文件

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

确保您已将 webpack 配置为使用 css-loader

或

在您的根组件中（主要是 App.vue）添加两个样式标签，一个用于全局样式，另一个用于范围样式（如果您有范围样式）attribute.See src imports.

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

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

Answer 3

首先安装一些依赖项：
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";

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

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

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

twitter-bootstrap

bootswatch

vue.js