Sass 如何与Hugo一起设置SCS

我对Hugo很陌生，我在文档方面有点挣扎，因为它的示例不完整，感觉非常零碎

我已经创建了一个新站点

hugo新站点站点名

以及一个新主题

hugo新主题名

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

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

---

不知道应该去哪里，整个管道是如何运作的。此外，这似乎是在专门查找

资产

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

静态/css

文件夹创建的。我在网上找到的大多数例子都是在支持添加到hugo之前使用gulp进行编译的旧设置（据我所知）

您可以使用hugo的扩展（like）版本，该版本会自动将SCS编译为CSS。然后，您可以自定义所有设置。如果你不想/不想使用扩展版，那么ofc你将不得不与ruby SASS或Gulp等守望者一起走老路

另请参阅：，参见注释。 “Hugo现在发布了两个二进制版本：一个支持SCSS/SASS，另一个不支持SCSS/SASS。在撰写本文时，这仅在GitHub发布页面上的二进制文件中提供。Brew、Snap builds等将提供。但请注意，如果您想编辑SCS，您只需要扩展版本。对于您的CI服务器，或者如果您不使用SCSS，您将ost可能需要非扩展版本。”

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

hugo

，它会完成其余的工作。你还必须确保你的主题能够很好地支持它。我使用的主题（支持SCS）：

不知道该去哪里，整个管道是怎么运作的

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

$style

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

---

以下是在Hugo建立SCSS管道的步骤

在Hugo配置中定义一个

assetDir

。此路径相对于config.toml所在的文件夹。示例：

assetDir=“/assets”

在资产文件夹中的某个位置创建SCS。Ex:/assets/sass/main.scss

转到基本HTML布局或任何其他部分，在那里您将正常导入CSS文件，并将代码添加到管道文档中。

resources.Get

旁边的URL与配置文件中定义的资产目录相关。在我的情况下，如下所示

{{$sass:=resources.Get“sass/main.scss”}
{{$style:=$sass | resources.ToCSS | resources.Fingerprint}

好的，我明白了，谢谢，我实际上运行的是v0.53（使用自制软件安装）。我猜它现在包括了支持，因为编译器似乎支持这些特性。发行说明和主题帮助我理解我遗漏了什么。我猜这些文件必须总是在

资产
文件夹下。@lostballon是的。默认情况下。还有主题配置管道。但是是的，通常是在
资产/
下。一个简单的问题，我猜当您使用的主题中的
目标路径设置为
'css/file.css
时，例如，当它被编译时，会在
/public/css/file.css
下结束？@lostballon正确。另外，还有一个postsss：如果需要的话。非常感谢你的帮助，我现在终于让原型工作了！