Sass / SCSS

Any Sass or SCSS file can be transformed into a CSS file using resources.ToCSS which takes two arguments, the resource object and a map of options listed below.

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

Options

transpiler [string]

The transpiler to use, valid values are libsass (default) and dartsass. If you want to use Hugo with Dart Sass you need to download a release binary from Embedded Dart Sass and make sure it’s in your PC’s $PATH (or %PATH% on Windows).

targetPath [string]

If not set, the resource’s target path will be the asset file original path with its extension replaced by .css.

vars [map]

Map of key/value pairs that will be available in the hugo:vars namespace, e.g. with @use "hugo:vars" as v; or (globally) with @import "hugo:vars"; New in v0.109.0

outputStyle [string]

Default is nested (LibSass) and expanded (Dart Sass). Other available output styles for LibSass are expanded, compact and compressed. Dart Sass only supports expanded and compressed.

precision [int]

Precision of floating point math. Note: This option is not supported by Dart Sass.

enableSourceMap [bool]

When enabled, a source map will be generated.

sourceMapIncludeSources [bool]

When enabled, sources will be embedded in the generated source map. (Dart Sass only). New in v0.108.0

includePaths [string slice]

Additional SCSS/Sass include paths. Paths must be relative to the project directory.

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules/myscss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}