Sass file not found

Warning: 1 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
                    done in 0.985 seconds.
 Auto-regeneration: enabled for 'E:/program/git/14790897.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
  [2023-04-10 09:53:39] ERROR `/assets/css/custom.scss' not found.

我明明有/assets/css/custom.scss这个文件,为什么没有找到呢?

首先让我们看看引用路径是否正确,以下是错误示范

这是一个HTML代码片段,它使用Jekyll的Liquid模板引擎将custom.scss文件引入到您的custom-post.html模板中。让我们逐行分析:

  1. <link rel="stylesheet" href="/assets/css/custom.scss">

    • <link>:HTML的<link>元素用于在当前文档与外部资源(例如样式表)之间建立关联。在这种情况下,它用于引入一个CSS样式表。
    • rel="stylesheet"rel属性定义了当前文档与链接资源之间的关系类型。在这里,它表示链接的资源是一个样式表。
    • href="/assets/css/custom.scss"href属性指定链接资源的URL。在这里,我们使用了一个Liquid模板表达式来动态生成URL。
      • '/assets/css/custom.scss':这是custom.scss文件在项目中的相对路径。
      • | relative_url:这是一个Liquid过滤器,它将输入的路径转换为相对于当前站点的URL。这对于确保链接在站点的任何部署环境中都能正常工作非常有用。

问题所在

这段代码的作用是将custom.scss样式表引入到custom-post.html模板中。但是,需要注意的是,这里直接引入了.scss文件,浏览器通常无法直接解析Sass文件(.scss)。正确的做法是将.scss文件编译成.css文件后再引入。

为了解决这个问题,您可以在项目的/assets/css目录中创建一个名为custom.scss的新文件,并在文件顶部添加以下内容:

---
---

这是一个空的YAML前置声明,它告诉Jekyll处理这个.scss文件并将其编译为一个.css文件。接下来,在custom-post.html文件中,将引用的文件扩展名从.scss更改为.css

<link rel="stylesheet" href="/assets/css/custom.css">

现在,当您运行Jekyll并生成站点时,custom.scss文件将被编译为custom.css文件,然后在custom-post.html模板中正确引用。

原因在于编译过程中scss文件转变成了css文件,而我的引用却是xxx.scss!!!!

恭喜您找到了问题所在!正如我之前提到的,浏览器需要CSS文件来应用样式。在部署到Web服务器之前,SCSS文件需要被编译成CSS文件。确保在HTML文件中引用编译后的CSS文件,而不是原始的SCSS文件。这样,您的网站就可以正确地显示和应用样式了。

例如,在您的HTML或模板文件中,您应该这样引用CSS文件:

<link rel="stylesheet" href="/assets/css/custom.css">

请注意,这里引用的是custom.css而不是custom.scss。这样,您的网站就可以正确地找到并应用编译后的样式表了。