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文件夹下的文件。我在网上找到的大多数示例都是使用gulp进行编译的旧设置（在我将支持添加到雨果之前）（据我了解）

Answer 1

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

也请参考：https://gohugo.io/news/0.43-relnotes/，请参阅注释。 “ Hugo现在发布了两个二进制版本：一个带有和不带有SCSS / SASS支持的版本。在撰写本文时，仅在GitHub发布页面上的二进制文件中可用。Brew，Snap builds等都会出现。但是请注意表示您只需要扩展版本即可编辑SCSS。对于CI服务器，或者如果您不使用SCSS，则很可能需要非扩展版本。“

我个人使用扩展版本； Gitlab CI也没有任何问题。我总是写/编辑SCSS。运行hugo，其余的工作就完成了。您还必须确保您的主题能够很好地支持/播放。我使用的主题（支持SCSS）：https://github.com/luizdepra/hugo-coder/

Answer 2

<块引用>

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

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

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

在您的 Hugo 配置中定义一个 assetDir。此路径相对于 config.toml 所在的文件夹。示例：assetDir = "/assets"
在您的资产文件夹中的某处创建您的 scss。例如：/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="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">

如何使用Hugo设置SCSS

2 个答案: