Styling not showing up for Preview window with Netlify CMS + Hugo (Site created with Stackbit)

Hello all,

I was wondering if anyone could give me any leads regarding some styling issues with the preview window of Netlify cms for a static Jamstack site I am trying to set up.

The website was rolled out using Stackbit (set-up is Hugo + Netlify CMS). The theme used was Azimuth
The site itself works fine as well as the functionality of the CMS, but the preview window is not showing any of the styling.

  1. What I have already tried:

I have followed the instructions here and my static/admin/index.yml looks like:

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Content Manager</title>
        <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    </head>
    <body>
        <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    <script>
        CMS.registerPreviewStyle("main.css")
    </script>
    </body>
    </html>

I found a solution at https://answers.netlify.com/t/styling-not-applied-to-preview-panel/22261 . But I am not using Locales so this is not my issue. The other solutions seem to be Gatsby specific.

  1. What the status of the problem is right now.

It seems the CMS finds the CSS but does not load it properly. If I point the index.yml to assets/css/main.css it finds it but can find no rules in the CSS.
If I add the compiled main.css directly to the static folder and point the index.yml to main.css I get partial styling, see screenshot:


but still nowhere near what I’d expect the preview to look like (and what the actual site looks like live).

Does anyone know what I am missing here or what my issue could be? My experience with frontend/styling/css is very limited, so it could well be I’m missing something very basic and rudimentary. If any further information or files are necessary, let me know and I will provide them.

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!