Would it be hard to support adding a single additional custom CSS/SASS file?

[Steven Roose]

It seems that it might happen that a user wants to fiddle a little bit with the CSS manually. Is it possible to have like a sass/extra.scss or something that gets loaded if it exists (or a field name custom_css="extra.scss" or something.

I'm kinda wanting the text width to be a tiny bit wider, but it seems like there's no way to slightly tweak/override CSS properties.

EDIT:
It seems like using blocks in the template pages is a common way to do that

• the strategy is explained here
• it's applied by no-style-please here

[Jake G]

stylesheets could be defined in config.toml like this:

stylesheets = ["main.css","extra.css"]

You could then load any extra stylesheets via a loop.

  {%- set stylesheets=config.extra.stylesheets | default(value=[ "main.css" ]) -%}
  {%- if stylesheets %}{%- for i in stylesheets %}
  <link rel="stylesheet" href="{{ get_url(path=i, trailing_slash=false, cachebust=true) | safe }}" />
  {%- endfor %}{%- endif %}

[Óscar]

Hey Steven!

Thanks for the feature request. Funnily enough, this was an undocumented feature until I removed it when adding skins (#105).

I'll bring it back! And better than ever.

Along with loading CSS files from config.toml, like Jieiku showed (thanks), I will allow loading files for individual posts as well, in the [extra] section of the post's front matter.

[Óscar]

Hey @stevenroose and @Jieiku,

Thank you both for your suggestions and input on this issue!

I've implemented the feature to allow dynamic loading of extra stylesheets in #118. You can now specify additional stylesheets both in the config.toml file and in individual page metadata in the [extra] section of the front matter.

How to Use

1. Site-wide: Add the stylesheet names to the stylesheets field in config.toml like this:

   [extra]
   stylesheets = ["extra1.css", "path/extra2.css"]

2. Individual pages: Specify the additional stylesheets in the [extra] section in the front matter of the post like so:

   +++
   title = "My Page"
   [extra]
   stylesheets = "individual.css"  # Use an array for more than one file.
   +++

Note: If you're working with .sass or .scss files, remember to specify the processed .css filenames, as Zola renders these into .css files in the public folder (docs). For example:

[extra]
stylesheets = ["extra.css"]  # Corresponding to `sass/extra.scss`

The feature has been documented in the config.toml and in the PR.

Have a fantastic weekend :)