CSS/SCSS Resources

As of Hugo version 0.43, we can use Hugo’s asset pipelines to process CSS. This means we can use SASS/SCSS, combine files into one stylesheet, cachebust our stylesheets automatically, and minify CSS without installing any additional build tools. This means we really only have to run hugo or hugo server to process these resources.

{{ $s := resources.Get “scss/style.scss” | toCSS | postCSS | minify }}

postCSS needs to be installed first:

1. In root, run npm install postcss-cli
2. npm install autoprefixer
3. add postcss.config.js to root. Example
4. Add package.json to root. Example
5. Add /node_modules to .gitignore

Read more about asset processing with Hugo.