Combining SCSS files into one CSS file

support
1

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?

2

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

1 Like
3

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.

4

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.

2 Likes