CSS 函数 on Hugo 中文文档

css.Build

Fri, 02 Oct 2026 00:00:00 +0800

（0.158.0 新增）

用 css.Build 函数可以：

递归地把 CSS 文件中的 @import 语句替换为被导入文件的内容
为兼容浏览器做语法转换
为兼容浏览器添加厂商前缀
压缩打包后的 CSS 代码
生成 source map

若 @import 语句带有媒体查询、特性查询或级联层（cascade layer）赋值，该函数会把导入的内容包进对应的 @media、@supports 或 @layer 规则中。

css.ChromaStyles

Fri, 02 Oct 2026 00:00:00 +0800

（0.165.0 新增）

css.ChromaStyles 函数以 Resource 对象的形式返回语法高亮器使用的 CSS 样式表。当 noClasses 选项为 false 时需要这份样式表：它既可以在项目配置中作为全局默认值设置，也可以在使用下列任一功能时单独指定：

css.PostCSS

Fri, 02 Oct 2026 00:00:00 +0800

css.PostCSS 函数使用 PostCSS 及其任意插件来转换 CSS。

准备

第 1 步

安装 Node.js。

第 2 步

在项目根目录安装所需的 Node 包。例如，安装 PostCSS、它的命令行界面，以及自动为 CSS 添加厂商前缀的插件：

npm install --save-dev postcss postcss-cli autoprefixer

第 3 步

在项目根目录创建 PostCSS 配置文件。Hugo 会向 PostCSS 进程暴露若干环境变量，其中包括当前的 Hugo 环境名。例如在下面的配置中，运行 hugo server 会禁用厂商前缀、启用内联 sourcemap；而为生产环境构建时则相反，会应用厂商前缀并禁用 sourcemap：

postcss.config.mjs

import autoprefixer from 'autoprefixer';

const isDev = process.env.HUGO_ENVIRONMENT === 'development';

export default {
  plugins: [
    !isDev ? autoprefixer : null
  ],
  map: isDev ? { inline: true } : false
};

第 4 步

把 CSS 文件放进 assets/css 目录。

第 5 步

创建一个 partial 模板来处理 CSS：

layouts/_partials/css.html

{{ with resources.Get "css/main.css" }}
  {{ $opts := dict
    "inlineImports" true
  }}
  {{ with . | css.PostCSS $opts }}
    {{ if hugo.IsDevelopment }}
      <link rel="stylesheet" href="{{ .RelPermalink }}">
    {{ else }}
      {{ with . | minify | fingerprint }}
        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

第 6 步

从 base 模板调用这个 partial 模板：

layouts/baseof.html

<head>
  {{ partial "css.html" . }}
</head>

选项

css.PostCSS 函数接受一个选项映射。

css.Quoted

Fri, 02 Oct 2026 00:00:00 +0800

向 css.Sass 函数传入 vars 映射时，Hugo 会用正则匹配识别诸如 24px 或 #FF0000 这类常见的有类型 CSS 值。必要时可以用 css.Quoted 函数绕过自动类型推断，明确表示该值必须当作带引号的字符串处理。

css.Sass

Fri, 02 Oct 2026 00:00:00 +0800

用 Hugo extended 与 extended/deploy 版本内置的 LibSass 转译器把 Sass 转译为 CSS，或者安装 Dart Sass 以使用 Sass 语言的最新特性。

css.TailwindCSS

Fri, 02 Oct 2026 00:00:00 +0800

用 css.TailwindCSS 函数处理 Tailwind CSS 文件。这个函数借助 Tailwind CSS CLI 完成以下工作：

扫描模板中使用的 Tailwind CSS 工具类。
把这些工具类编译为标准 CSS。
生成优化后的 CSS 输出文件。

css.Unquoted

Fri, 02 Oct 2026 00:00:00 +0800

向 css.Sass 函数传入 vars 映射时，Hugo 会用正则匹配识别诸如 24px 或 #FF0000 这类常见的有类型 CSS 值。必要时可以用 css.Unquoted 函数绕过自动类型推断，明确表示该值必须当作不带引号的字符串处理。