当网站结构复杂的时候，使用 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 文件夹下创建这样的目录：

v b l c p m e a a o a a n s y m g i d e o p e n o / _ _ u o s . r v m p t n s / a i l / e c r x a n s i i c t s 预 a n e s 设 b s h 框 / 文 l . o 架 件 e s l 入 s c d 口 . s e s s r 模 c s 块 s . s s c s s 变 量

对了，这篇文章的作者叫做 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 支持
• etc

姑且把这个主题叫做 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