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:
header.module.css
footer.module.css
…
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?
main.scss:
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.