Guide to configuring Hugo with Dart Sass and SCSS modules

README.md

💡 Using Dart Sass in Hugo (Extended Version) with SCSS Modules

This guide walks through how to fully switch to Dart Sass for styling in a Hugo static site. This removes all dependency on deprecated LibSass and uses the recommended Dart Sass SCSS module system (@use, @forward).

✅ Prerequisites

• Hugo Extended version (brew install hugo)
• Dart Sass installed (brew install sass/sass/sass)
• A proper SCSS folder structure under /assets/scss/

---

🗂️ Project Structure

assets/
└── scss/
    ├── base/
    │   ├── _variables.scss
    │   ├── _typography.scss
    │   ├── _reset.scss
    │   └── _utilities.scss
    ├── components/
    │   ├── _navbar.scss
    │   ├── _footer.scss
    │   ├── _cards.scss
    │   └── _hero.scss
    ├── layout/
    │   └── _grid.scss
    ├── themes/
    │   ├── _darkmode.scss
    │   └── _maverick.scss
    └── styles.scss

---

📄 styles.scss (Entry Point)

@use "scss/base/variables" as *;
@use "scss/base/reset";
@use "scss/base/typography";
@use "scss/base/utilities";
@use "scss/layout/grid";
@use "scss/components/navbar";
@use "scss/components/footer";
@use "scss/components/cards";
@use "scss/components/hero";
@use "scss/themes/darkmode";
@use "scss/themes/maverick";

---

🧠 Using Dart Sass in Hugo (layouts/partials/head.html)

{{ $options := dict "transpiler" "dartsass" "targetPath" "css/main.css" "outputStyle" "compressed" }}
{{ $styles := resources.Get "scss/styles.scss" | toCSS $options | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">

💡 This inline option forces Hugo to use Dart Sass even if LibSass is still linked internally.

---

❌ Remove Old Config (if present)

In config.toml or hugo.toml:

# REMOVE THIS:
#[markup.sass]
#  useDartSass = true

# OPTIONAL (not necessary if using inline dict):
[params.sass]
  transpiler = "dartsass"

---

✅ Verify Hugo Uses Dart Sass

hugo env

You should see:

github.com/sass/dart-sass/compiler="1.89.2"
...

---

🧪 Run Hugo Server

hugo server --cleanDestinationDir --ignoreCache

You should now see your styles applied correctly using Dart Sass features like @use, @forward, @mixin, and SCSS scoping.

---

🙌 Credits

Originally built by @askeijaz using Pygments, Dart Sass, and Hugo’s resources pipeline.