如何使用 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

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

另请参考：https://gohugo.io/news/0.43-relnotes/，见注释。 "Hugo is now released with two binary version: One with and one without SCSS/SASS support. At the time of writing, this is only available in the binaries on the GitHub release page. Brew, Snap builds etc. will come. But note that you only need the extended version if you want to edit SCSS. For your CI server, or if you don’t use SCSS, you will most likely want the non-extended version."

我个人使用的是加长版； Gitlab CI 也没有任何问题。我总是write/editSCSS；运行 hugo 剩下的就交给它了。您还必须确保您的主题 supports/plays 与它相得益彰。我使用的主题（支持SCSS）：https://github.com/luizdepra/hugo-coder/

Answer 2

Not sure where that's supposed to go, how the whole pipeline works

该代码应该放在 HTML 中，特别是您通常添加 CSS 的地方。代码中的 $styles 变量将包含已处理 CSS 文件的位置以及其他详细信息（如果有）。

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

在您的资产目录中的某处创建您的 scss。默认资产目录是 /assets。例如：/assets/sass/main.scss
转到您的基本 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 }}">

如何使用 Hugo 设置 SCSS

How to setup SCSS with Hugo

sass

hugo