将 Bootstrap 4 添加到 Slate V1 - 在 Chrome 开发者工具中获取两个索引

Question

我是网络开发方面的新手。我之前做过一些开发，但不是Web方面的。

我了解 CSS 是什么、Javascript 的作用以及基本 HTML 的基础知识。

我已经安装了 Slate，并且下载了 Bootstrap 4 文件并将它们添加到我在 theme.scss.liquid 文件下生成的新 slate 主题中。我已按照此处另一个线程中的说明单独添加了每个 _.scss。

但是，当我这样做时，某些样式停止工作，并且当我（在 Chrome 上）转到“视图”->“开发人员”->“开发人员工具”时，我注意到有两个“索引”。

2个问题

1）我假设正在加载第二个“索引”，这就是我的样式被忽略的原因。如何或从哪里加载第二个索引？

2）我认为 slate V1 附带了一些它自己的样式。添加 bootstrap 4 scss 会与此冲突，因此我是否需要删除一些 slate v1 样式或配置？

谢谢，我意识到这可能是一个松散的问题，需要我进一步理解。

干杯

克里斯

Answer 1

Slate 附带了 scss 文件的框架和（非常）稀疏的样式表，以向您展示文件夹结构的外观。如果您是新手并且只是想使用 bootnap，请尝试将 cdn 版本添加到

theme.liquid

中，并开始按照

https://getbootstrap.com/

将标记添加到您的 html

---

仅CSS：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

---

JS、Popper.js 和 jQuery

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>