How to create a custom preview with Hugo generated stylesheet?

Netlify CMS
1

I’m launching my first Hugo website on Netlify and managed to get the NetlifyCMS running. I would like to add the frontend styling of the website to the preview pane and I wonder how to do this.

In my website I use SASS and the CSS is generated with this code:

{{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

It doesn’t seem to work in the script tag described in the documentation:

<script>
  CMS.registerPreviewStyle("/example.css");
</script>

Is it possible to do this?

2

Hi @corneelonline and welcome to the community :slight_smile:
Where are you generated styles located in the published site?
You should be able to use CMS.registerPreviewStyle for any CSS file that is available in your published site, e.g, CMS.registerPreviewStyle("/example.css") should work if https://<your-site>/example.css returns a valid CSS file.
You can also register raw CSS files if that helps:

3

Hi @erez,
Thanks for your warm welcome and for pointing me into the right direction!
I found the solution in choosing the right path for the CSS file. I got rid of the fingerprint option in the sass compilation, so the css file is always named the same.

Works like a charm. Thanks!

1 Like