在 Hugo 中使用 Sass

当网站结构复杂的时候，使用 sass 就很必要了。但是 hugo+sass 的教程很少见，我这里参考一些英语资料总结一些你可能需要的 tips。

一、Sass 的支持#

从 0.43版本之后，Hugo 就支持了 Sass 的编译，这意味着在编译静态网站的时候不用同时运行 Gulp 或者其他的什么前端工具。

什么，你连 Sass 是什么都不知道，快戳这个链接看看吧。

二、Sass 的文件结构#

在 Hugo 中，你只能把 Sass 的源文件放到 /assets/scss/ 或 /themes/your-theme/assets/scss/ 下，没有别的路径可以选择。

这里假设入口 scss 文件为 main.scss。根据《Architecture for a Sass Project》的建议，我们也在 scss 文件夹下创建这样的目录：

vendor/  预设文件
base/    
|
|-- _variables.scss   变量
|-- _mixins.scss
|-- _placeholders.scss

layout/   框架
components/    模块
pages/
main.scss   入口

对了，这篇文章的作者叫做 Hugo Giraudel，如果你在Google 中搜索 hugo + sass ，大概率搜索到的是这位大牛写的关于 sass 的文章……

接着，在 main.scss 中将这些模块都 @import 进去。

三、通过 Hugo 编译 scss 文件#

如果你前面做的都没问题，那么在对应的模板中加入：

{{ $styles := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}

其中 resouces.Get 是 Huho 提供的函数获取 scss 文件内容，后面的 toCSS，minify，fingerprint是一些管道操作，用来编译和压缩 CSS。

Fingerprint 这个技术可以给生成的文件加上独一无二的 hash 文件名，这样网站更新后，用户从CDN拉取的也是最新的 css 而不是缓存中的老文件。

接着，在 html 的 head 中加入

<link rel=”stylesheet” href=”{{ $styles.Permalink }}” integrity="{{ $styles.Data.Integrity" media=”screen”>

基本就完成了整个引入的操作。

四、覆写主题中已有的 scss#

如果你已经引入了别人的主题，对方有一个 scss 文件，你自己想要覆写，你可以在本地的 /assets/scss/ 下建立一个同名的文件，这个文件的优先级比主题中的更高。

五、根据 Hugo 的模板来写 scss#

我目前使用的是 hugo-paper 主题，当然我自己已经魔改好几轮了。包括：

• 增加图片展示
• 增加 valine 支持
• 增加 脑图 支持
• 增加 category 支持

姑且把这个主题叫做 hugo-paper-plus 吧。

这个主题的模板很简单，一共包括四个部分：

• 全局的 header.html
• 全局的 footer.html
• 文章列表页 list.html
• 文章页 single.html

所以针对这个结构，我想到对应的 scss 结构是这样的：

• /pages/single.scss
• /pages/list.scss
• /layout/header.scss
• /layout/footer.scss
• /components/list-item.scss

六、分割 CSS，重写#

这段就没什么好说的了，苦逼编码中。目前已经将一个大的 css 文件分割成了若干个小文件。

啊对了，如果你和我一样用的 netlify 来编译网站的话，记得修改一下 hugo 的版本，最新的版本是 0.54.0 。

参考文章：

How to cache-bust and concatenate JS and SASS files with Hugo in 2018