Using Hugo to generate CSS files in themes?

My theme currently has this ugly HTML partial included on every page to override colors set in the main CSS file. Since the new version of Hugo has support for generating files other than HTML, is it possible to create a style.css template and how would I go about doing so?

Yes this is possible. Check out the latest release notes:

And also at the bee output formats docs.

The documentation makes sense for when I’m wanting to creating alternative versions of my site pages, but not for generating a single CSS file for my site using custom colors. I keep all of my CSS under the folder css/, so the examples in the 0.20.2 release notes don’t apply to my intended use. I want to not use <style> tags for custom CSS and I don’t have an HTML page to correspond with the CSS file as in the second example.

What I have tried:

I created a file /layouts/css/style.css to correspond with my static CSS files being under /static/css. Inside it, I put the contents of my custom_css.html partial file without the <style> tags. The file is not generated by Hugo at all.

As far as I can tell, this should be correct. What am I doing wrong?

You can use Hugo’s templating syntax to create custom outputs as well. This includes writing directly to a CSS file, so you don’t need to use the <style> tags:

Your use case is more clearly described here:

There is, however, one slight problem currently doing this in themes is that it depends on a site (or) page configuration, neither currently available in themes.

If I am understanding you correctly, then, it’s currently not possible to generate a CSS file using only a theme template and .Site.Params?

Or, if it is possible, do you know why the file would not be generated with the method I tried above?

I’ve looked at both the documentation and the release notes, but the examples used don’t directly apply to my use case and I’m still learning how this templating system works. Your help is greatly appreciated.

I have not looked at your method. “My” method is possible with a theme – but you need to tell the site owner to put an “outputs” configuration into his/hers config.toml.

The following quote is what I meant:

From what I understand, I cannot generate a standalone CSS file. Hugo expects there to be a content file listed under some page type, e.g. “page”, “home”, etc., and thus the example of using the home page to generate a CSS file. I think that is the example you were talking about, as it requires the site owner to specify that “home” pages also generate CSS. I’d like to avoid that so I can keep my CSS in the css/ folder.

No, that is not true. Typical Hugo 0.20.2. use cases would be to create 1 CSS per:

  • home page (i.e. global styles)
  • section (i.e. section styles)

No content files in the above (you could have content files, but that is another discussion).

@Shadow53 Did you get this sorted out? If so, can you provide how you solved it by showing a file structure or linking to your code and explaining the steps? I’m facing the same issue, thanks!

This is an ancient thread from 3 years ago. Hugo has changed a lot since then.

Have a look at the Hugo Documentation particularly Hugo Pipes.

If you still have a question then please open a new topic, instead of resurrecting an old one that may contain out-of-date information.