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

[stevenroose]

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

[welpo]

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 :)

[Jieiku]

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 %}

[welpo]

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.