resources.ToCSS
语法
resources.ToCSS [OPTIONS] RESOURCE
返回值
resource.Resource
{{ with resources.Get "sass/main.scss" }}
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
{{ with . | toCSS $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 }}
使用 Hugo 扩展版和扩展/部署版中包含的 LibSass 转译器将 Sass 转译为 CSS，或者安装 Dart Sass 以使用 Sass 语言的最新功能。
Sass 有两种语法形式：SCSS 和 缩进。Hugo 同时支持这两种语法。
选项
- transpiler
- (
string) 要使用的转译器，可以是libsass(默认) 或dartsass。Hugo 的扩展版和扩展/部署版包括 LibSass 转译器。要使用 Dart Sass 转译器，请参阅下面的安装说明。 - targetPath
- (
string) 如果未设置，则转换后的资源的target path将是资产文件的原始路径，其扩展名替换为.css。 - vars
- (
map) 键值对的映射，将在hugo:vars命名空间中可用。可用于从 Hugo 模板初始化 Sass 变量。
// LibSass
@import "hugo:vars";
// Dart Sass
@use "hugo:vars" as v;
- outputStyle
- (
string) LibSass 可用的输出样式包括nested(默认)、expanded、compact和compressed。Dart Sass 可用的输出样式包括expanded(默认) 和compressed。 - precision
- (
int) 浮点数学的精度。不适用于 Dart Sass。 - enableSourceMap
- (
bool) 如果为true，则生成源映射。 - sourceMapIncludeSources
- (
bool) 如果为true，则将源嵌入到生成的源映射中。不适用于 LibSass。 - includePaths
- (
slice) 路径的切片，相对于项目根目录，转译器将在解析@use和@import语句时使用。
{{ $opts := dict
"transpiler" "dartsass"
"targetPath" "css/style.css"
"vars" site.Params.styles
"enableSourceMap" (not hugo.IsProduction)
"includePaths" (slice "node_modules/bootstrap/scss")
}}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
Dart Sass
Hugo 的扩展版包含 LibSass，用于将 Sass 转译为 CSS。2020 年，Sass 团队弃用了 LibSass，转而支持 Dart Sass。
通过在开发和生产环境中安装 Dart Sass 来使用 Sass 语言的最新功能。
安装概述
Dart Sass 与 Hugo v0.114.0 及更高版本兼容。
如果您一直在 Hugo v0.113.0 及更早版本中使用嵌入式 Dart Sass1，请卸载嵌入式 Dart Sass，然后安装 Dart Sass。如果您同时安装了这两个版本，Hugo 将使用 Dart Sass。
如果您将 Hugo 作为 Snap 包 安装，则无需安装 Dart Sass。Hugo Snap 包包含 Dart Sass。
在开发环境中安装
当您将 Dart Sass 安装在 PATH 中的某个位置时，Hugo 将会找到它。
| 操作系统 | 包管理器 | Site | 安装 |
|---|---|---|---|
| Linux | Homebrew | brew.sh | brew install sass/sass/sass |
| Linux | Snap | snapcraft.io | sudo snap install dart-sass |
| macOS | Homebrew | brew.sh | brew install sass/sass/sass |
| Windows | Chocolatey | chocolatey.org | choco install sass |
| Windows | Scoop | scoop.sh | scoop install sass |
您还可以安装适用于 Linux、macOS 和 Windows 的 预构建二进制文件。
运行 hugo env 以列出活动的转译器。
在生产环境中安装
对于 CI/CD 部署（例如，GitHub Pages、GitLab Pages、Netlify 等），您必须编辑工作流程以在 Hugo 构建站点之前安装 Dart Sass2。某些提供商允许您使用上述包管理器之一，或者您可以下载并提取预构建二进制文件之一。
GitHub Pages
要在 GitHub Pages 上为您的构建安装 Dart Sass，请将此步骤添加到 GitHub Pages 工作流程文件中
- name: Install Dart Sass
run: sudo snap install dart-sass
如果您是第一次在您的仓库中使用 GitHub Pages，GitHub 为 Hugo 提供了一个包含 Dart Sass 的入门工作流程。这是最简单的入门方式。
GitLab Pages
要在 GitLab Pages 上为您的构建安装 Dart Sass，.gitlab-ci.yml 文件应如下所示：
variables:
HUGO_VERSION: 0.141.0
DART_SASS_VERSION: 1.83.4
GIT_DEPTH: 0
GIT_STRATEGY: clone
GIT_SUBMODULE_STRATEGY: recursive
TZ: America/Los_Angeles
image:
name: golang:1.20-buster
pages:
script:
# Install Dart Sass
- curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
- tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
- cp -r dart-sass/* /usr/local/bin
- rm -rf dart-sass*
# Install Hugo
- curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
- apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
- rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
# Build
- hugo --gc --minify
artifacts:
paths:
- public
rules:
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
Netlify
要在 Netlify 上为您的构建安装 Dart Sass，netlify.toml 文件应如下所示：
[build.environment]
HUGO_VERSION = "0.141.0"
DART_SASS_VERSION = "1.83.4"
NODE_VERSION = "22"
TZ = "America/Los_Angeles"
[build]
publish = "public"
command = """\
curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
export PATH=/opt/build/repo/dart-sass:$PATH && \
hugo --gc --minify \
"""
示例
要使用 Dart Sass 进行转译，请在传递给 resources.ToCSS 的选项映射中将 transpiler 设置为 dartsass。例如：
{{ with resources.Get "sass/main.scss" }}
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
{{ with . | toCSS $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 }}
其他
如果您从源代码构建 Hugo 并运行 mage test -v，如果您将 Dart Sass 安装为 Snap 包，则测试将失败。这是由于 Snap 包的严格限制模型所致。