twitter-bootstrap - 将 Bootstrap SASS 添加到 Jekyll/GitHub 页面

标签 twitter-bootstrap sass bootstrap-4 jekyll github-pages

如何将 Bootstrap 的 SASS 引入我的 Jekyll 项目,以便它可以在 GitHub 页面上运行?

这不是这个问题的重复:Adding Bootstrap to Jekyll .这个问题与 GitHub Pages 关系不大,答案提到使用 Bower,我认为 GitHub Pages 不支持。

这行不通:

---
---
// This is at "/assets/css/site.scss"
@import "bootstrap";

我收到这个错误:

File to import not found or unreadable: bootstrap

我已经尝试过 bundle add bootstrap 但这并没有改变任何东西。

我能够npm install bootstrap 并让 Jekyll 根据 the instructions on this sitenode_modules/bootstrap 拉入需要的东西它可以在我的机器上运行,但这不是适合 GitHub Pages 的解决方案,因为 GitHub Pages 不使用 npm

最佳答案

首先,您需要确保您的 bootstrap sass 文件没有前置两行 3 个破折号,因此在 bootstrap.scss 中删除这个。

---
---

在此之后打开您的 config.yml文件并添加以下行,我的建议是在根级别添加一个名为 scss/ 的文件夹和你所有的scss文件(这里有点模糊,对我来说它效果最好,因为有很多帖子都这样建议,因为有时 Jekyll::Converters::Scss? 似乎会破坏相对路径)。

sass:
  sass_dir: scss

你应该很高兴去 @import "bootstrap.scss";在你的另一个scss . 在您要编译的其他文件中 .scss.css所以确保在此处包含两行 3 个破折号并将它们添加到您的 <head>作为.css文件。

关于twitter-bootstrap - 将 Bootstrap SASS 添加到 Jekyll/GitHub 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50378938/

相关文章:

jquery - 单击 Owl Carousel 中的图像后,如何在 Bootstrap 模式中打开确切的图像?

python - Django - 表从查询集中呈现空白行

compiler-errors - Gulp-Sass undefined variable -下划线转换为破折号

twitter-bootstrap - Bootstrap 定制发生了什么?

css - 使用 Bootstrap 在导航栏内垂直居中下拉

javascript - 隐藏在面板后面的下拉菜单

jquery - 重置 select2 值并显示占位符

css - 溢出属性在引导卡列中无法按预期工作,需要建议

javascript - 单击图像时 Bootstrap 崩溃

c# - 如果元素上有类,则 CSS 选择器应用 CSS