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.
- 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.
- 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
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
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.