如何使用Hugo设置SCSS

Question

我是Hugo的新手，在文档方面有一点困难，因为它的例子不完整，感觉很零碎。

我已经创建了一个带有新主题hugo new theme theme-name的新站点hugo new site site-name。

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

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

不知道它应该去哪里，整个管道是如何工作的。此外，即使主题是用static/css文件夹创建的，这似乎也是专门在assets文件夹下查找文件。我在网上找到的大多数例子都是在hugo中添加支持之前使用gulp编译的旧设置(据我所知)

Answer 1

您可以使用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版本等将会出现。但请注意，如果您想编辑SCSS，您只需要扩展版本。对于CI服务器，或者如果您不使用SCSS，您很可能需要非扩展版本。“

我个人使用的是扩展版本；Gitlab CI也是如此，没有任何问题。我总是编写/编辑SCSS；运行hugo，它会完成剩下的工作。你还必须确保你的主题能很好地支持/发挥它。我使用的主题(支持SCSS)：https://github.com/luizdepra/hugo-coder/

Answer 2

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

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

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

1. 在您的资产目录中的某个位置创建您的scss。默认资源目录为/assets。例如:将/assets/sass/main.scss
2. Go添加到您的基本HTML布局或任何其他部分，您将在其中正常导入您的CSS文件，并在那里的管道文档中添加代码。resources.Get旁边的URL是相对于配置文件中定义的资产目录的。在我的例子中，它类似于以下代码：

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