代码之家 › 专栏 › 技术社区 › Mose

如何将引导样例主题添加到Vue项目?

bootswatch vue.js twitter-bootstrap

1

Mose · 技术社区 · 8 年前

我的Vue项目中的引导程序工作正常。我想使用Bootswatch中的主题。在我的Vue项目中,我替换了node\u模块/引导/dist/引导。min.css文件,其中一个是我从Bootswatch网站下载的。但新主题没有改变任何东西。注:在我的主要。js我有以下几点:

导入“引导”

我如何正确地让新主题发挥作用?

3 回复 | 直到 8 年前

1

3

Choupi 7 年前

首先安装一些依赖项:
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 是主题名称,因此可以将其替换为选择 ðИ

2

Vamsi Krishna 8 年前

您应该在main中导入css文件。js如下

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>

3

1

Brett M 8 年前

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