Suggestions for starting with SASS

Hello, I built a website using Hugo but all the CSS rulesets are kept in one file “main.css”. I tried commenting each section like, so:

/* Header /

Sidebar */

and so on, but even with that one CSS file becomes hard to manage. I would like to split it up.
I used Gatsby recently and it allowed me to split up the CSS using CSS Modules:


I was wondering what’s the alternative for Hugo. I was thinking about using SASS. Do I need to have that “package.json” in my repository in order for SASS to work with Hugo or Hugo can tap into SASS without using Gulp?

Also, what’s a good strategy to split up the files. Should I create a main.scss which imports all the other SASS files?

import “header.scss”
import “sidebar.scss”

and just load that one main.scss in Hugo?

I would be grateful for suggestions. I appreciate your time. Thank you.

Hugo pipes:
CSS architecture:


Thanks, jmooring! That’s super helpful.

SCSS/SASS works really well natively in Hugo, no need for any package.json/npm.

For completeness I can mention that Hugo also supports PostCSS (that needs a “npm install”):

Note the “inline import” option that works great in combo with Tailwind CSS.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.