Jekyll 静态页面 CSS 未呈现

Question

我正在使用 Jekyll 为自己构建一个博客，但是，当我在浏览器中打开该页面时，SCSS 无法加载。我尝试通过浏览器导航到 SCSS 文件但无济于事，浏览器认为 SCSS 不存在。

以下是我将样式表添加到 HTML 的方法：

<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">

我对我的所有样式表都这样做了，但它不起作用。

有谁知道如何解决这个问题？提前谢谢你。

Answer 1

您不会 link 使用 href 指向 "/_sass/_base.scss" 的样式表。

相反，您应该执行以下操作：

创建另一个目录来保存您的 "stylesheet"，比如 css/。

然后添加一个空样式表和一个空的前端块（需要）

---
---

// this is an empty stylesheet named "style.scss"
// use @import here to load partials from your _sass folder

将您的部分导入到上面 "stylesheet"。

---
---

// this is an empty stylesheet named "style.scss"
// use @import here to load partials from your _sass folder

@import "base";
@import "mixins";

link 您的 HTML 带有样式表的页面：

<link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">

...完成！

要点：

将文件从您的 _sass 导入 "dedicated stylesheet"。
专用样式表必须包含 front matter 块（可以为空）。
Link 带有专用样式表的 HTML 文件。
Linked 文件具有 .css 扩展名，即使您的源文件是 css/style.scss 或 css/style.sass
您可以 hard-code 标记或使用 Liquid 构造 link 样式表。
使用 Liquid 构造时，更喜欢使用 relative_url 过滤器而不是使用
{{ 'css/style.css' | prepend: site.baseurl }} 或 {{ site.baseurl }}/css/style.css

Jekyll 静态页面 CSS 未呈现

Jekyll Static Page CSS Not Rendering

sass

jekyll