ToCSS
Syntax
css.Sass [OPTIONS] RESOURCE
Returns
resource.Resource
Alias
toCSS
使用方法
使用 Hugo 扩展版和扩展/部署版中包含的 LibSass 编译器将 Sass 转换为 CSS，或者 安装 Dart Sass 以使用 Sass 语言的最新功能。
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
Sass 有两种语法形式：SCSS 和 缩进式 。Hugo 支持这两种语法。
选项
- transpiler
- (
string) 要使用的编译器，libsass（默认）或dartsass。Hugo 的扩展版和扩展/部署版包含 LibSass 编译器。要使用 Dart Sass 编译器，请参见下面的 安装说明 。 - targetPath
- (
string) 如果未设置，转换后的资源目标路径将是资源文件的原始路径，其扩展名替换为.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 Sass 1(In) ，请卸载嵌入式 Dart Sass，然后安装 Dart Sass。如果您同时安装了这两个版本，Hugo 将使用 Dart Sass。
如果您将 Hugo 安装为[Snap 包]，则无需安装 Dart Sass。Hugo Snap 包包含 Dart Sass。
在开发环境中安装
当您将 Dart Sass 安装到 PATH 中的某个位置时，Hugo 将会找到它。
| 操作系统 | 包管理器 | 网站 | 安装命令 |
|---|---|---|---|
| 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 Sass 2(You) 。一些提供商允许您使用上述包管理器之一，或者您可以下载并解压预编译二进制文件之一。
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.137.1
DART_SASS_VERSION: 1.80.6
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.137.1"
DART_SASS_VERSION = "1.80.6"
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 进行编译，请在传递给 css.Sass 的选项映射中将 transpiler 设置为 dartsass 。例如：
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
其他
如果您从源代码构建 Hugo 并运行 mage test -v ，如果您将 Dart Sass 安装为 Snap 包，则测试将失败。这是由于 Snap 包的严格限制模型造成的。