Jekyll 静态页面 CSS 不渲染

Question

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

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

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

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

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

Answer 1

您没有链接到带有"/_sass/_base.scss" 的href 的样式表。

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

• 创建另一个目录来保存您的“样式表”，例如css/。

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

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

• 将您的部分导入到上述“样式表”中。

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

• 将您的 HTML 页面与样式表链接：

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

...完成了！

---

要点：

• 将文件从您的_sass 导入“专用样式表”。
• 专用样式表必须包含前面的内容块（可以为空）。
• 将您的 HTML 文件与专用样式表相关联。
• 链接文件具有.css 扩展名，即使您的源文件是css/style.scss 或css/style.sass
• 您可以对标记进行硬编码或使用 Liquid 构造来链接样式表。
• 使用 Liquid 构造时，最好使用 relative_url 过滤器，而不是使用
  {{ 'css/style.css' | prepend: site.baseurl }} 或 {{ site.baseurl }}/css/style.css