如何使用 Hugo 设置 SCSS

Posted 2023-03-07

【中文标题】如何使用 Hugo 设置 SCSS

【英文标题】：How to setup SCSS with Hugo

【发布时间】：2019-06-01 02:36:32

【问题描述】：

我对 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 进行编译的旧设置（据我了解）

【参考方案1】：

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

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

我个人用的是加长版； Gitlab CI 也是如此，没有任何问题。我总是编写/编辑 SCSS；运行hugo，剩下的就交给它了。您还必须确保您的主题支持/很好地配合它。我使用的主题（支持 SCSS）：https://github.com/luizdepra/hugo-coder/

【讨论】：

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

@LostBalloon 是的。默认。主题也配置了管道。但是是的，通常在assets/ 下。

一个简单的问题，我猜当你使用的主题中的targetPath 设置为'css/file.css 时，它是用于编译时，最终在/public/css/file.css 下？

@LostBalloon 正确。另外，如果需要，还有 PostCSS：gohugo.io/hugo-pipes/postcss。

非常感谢您的帮助，我的原型终于可以工作了！

【参考方案2】：

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

该代码应该放在 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=" $styles.Permalink " integrity=" $styles.Data.Integrity ">

【讨论】：

有点过时了，但是帮了大忙。您不再需要定义assetDir，文档中有一个示例。但它有助于获取您直接在 html 中使用它的信息。认为您必须在某种构建系统中执行此操作。 gohugo.io/hugo-pipes/introduction

@Citrullin 很高兴它对你有帮助。更新了默认资产目录的答案。感谢您指出。