Combining SCSS files into one CSS file

I am trying to combine multiple scss files in the assets folder into a single css.

I have tried the following options in my hugo yml configuration but none of them work. :frowning_face:

  1. *Using .scss directly
assets:
  css:
    - name: foo.css
      bundle: true
      fingerprint: true
      path: css/foo.css
      src: assets/scss/*.scss

  1. Using resource.Match
assets:
  css:
    - name: foo.css
      bundle: true
      fingerprint: true
      path: css/foo.css
      src:
        - resources.Match("assets/scss/*.scss")
  1. Using postprocess
assets:
  postprocess:
    - name: foo.css
      type: css
      src: assets/scss/*.scss
      targetPath: css/foo.css
      bundle: true
      fingerprint: true

I was expecting to find a css/foo.css when I run hugo. But no effect. What am I missing?

This does not look like a standard hugo configuration. See Configure Hugo | Hugo

So I suppose it belongs to your Theme. You might find more information or guidance in their docs. Some also have a place to ask questions.

For the Hugo way check out

OMG! It is not standard hugo configuration? That’s why one should never use the code from the internet blindly :laughing:

I had earlier seen the docs page you pinged. But it had examples of processing only single file. I gave it a try for multiple files. No luck.

Let me try a few related things, and report back. But thanks for the reply.

Your config settings aren’t the problem.

You’ll need to call Hugo’s pipes in your templates to handle CSS processing, including concatenation and transformation into CSS.

1 Like