如何使用Hugo设置SCSS

Question

我对 Hugo 还很陌生，并且在文档方面遇到了一些困难，因为它感觉非常支离破碎，示例不完整。

我创建了一个新网站

hugo new site site-name

以及一个新主题

hugo new theme theme-name

。

在 SASS/SCSS 的文档页面中有以下示例：

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

不确定它应该去哪里，整个管道如何工作。此外，这似乎是专门寻找

assets

文件夹下的文件，即使主题是使用

static/css

文件夹创建的。我在网上找到的大多数示例都是在将支持添加到 Hugo 之前使用 gulp 进行编译的旧设置（根据我的理解）

Answer 1

不确定它应该去哪里，整个管道如何工作

该代码应该放在 HTML 内部，特别是您通常添加 CSS 的地方。代码中的

$styles

变量将包含已处理 CSS 文件的位置以及其他详细信息（如果有）。

---

以下是在 Hugo 中设置 SCSS 管道的步骤，

1. 在资产目录中的某个位置创建您的 scss。默认资源目录是

   /assets

   。例如：/assets/sass/main.scss
2. 转到基本 HTML 布局或任何其他部分部分，您将在其中正常导入 CSS 文件，并在其中的管道文档中添加代码。

   resources.Get

   旁边的 URL 相对于配置文件中定义的资产目录。就我而言，如下所示，

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

Answer 2

您可以使用hugo的扩展版本（如https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Windows-64bit.zip），它会自动将SCSS编译为CSS。然后您可以自定义所有设置。如果你不想/不使用扩展版本，那么 ofc 你将不得不使用像 ruby SASS 或 Gulp 等这样的观察者。

另请参考：https://gohugo.io/news/0.43-relnotes/，参见注释。 “Hugo 现在发布了两个二进制版本：一种支持 SCSS/SASS，一种不支持 SCSS/SASS。在撰写本文时，这仅在 GitHub 发布页面上的二进制文件中可用。Brew、Snap 构建等都会出现。但请注意如果您想为 CI 服务器编辑 SCSS，则仅需要扩展版本，或者如果您不使用 SCSS，则很可能需要非扩展版本。”

我个人使用的是扩展版；使用 Gitlab CI 也是如此，没有任何问题。我总是编写/编辑 SCSS；运行

hugo

，它会完成剩下的工作。您还必须确保您的主题支持/兼容它。我使用的主题（支持SCSS）：https://github.com/luizdepra/hugo-coder/