Not able to get Global Stylesheets working anymore

I’ve updated everything to the latest build ( to test the SCSS option, but I’m not able to get the global stylesheets to load anything on the front end. It doesn’t matter if I have SCSS toggled on in settings or not, it shows the global stylesheet loading in the DOM, but it’s empty (despite having a couple of test classes inside). I’ve tried this on a couple of different builds and can’t get it to work on any of them. I’ve always used global stylesheets before, so I’m not sure what’s wrong.

What I was wanting to do is test the SCSS option, which I know is in beta currently. The documentation for global stylesheets says, “No need to minify or prefix your properties”, so I was wondering if that meant it autoprefixes vendor prefixes or if I’m misreading this.

In any case, I guess the overall questions would be, in the future when SCSS is more stable in Cwicly, will it include the autoprefixer option, and is the global stylesheet option currently broken, or is it just me? Thanks!

I did notice one time I went to load the Index template and the styles worked for a minute, but then stopped working again. I tried reloading the Index template again, but nothing happened after that. I seem to remember something in the past where styles wouldn’t load unless you visited the page or template and then they loaded. Anyway, not sure if that’s related, but I did notice that.

1 Like

Hi @msguerra74,

Sorry to hear about this.
If the stylesheets aren’t loading on the frontend, it could suggest that there is an error in your stylesheet CSS preventing Cwicly from saving it. Could you possibly open your browser console if there is any specific error appear in there?

Yes, we do prefix and minify all global stylesheets automatically (regardless of the SCSS option enabled). And no, the current implementation of global stylesheets is not broken.


Hey @Louis ,

Thanks for the info. I did some further testing and this is what seems t be happening.

  • Leave SCSS turned off in settings.
  • Go into a page and add a global stylesheet. Add something simple (see code) and click the red dot to activate the stylesheet:
.test {
    color: red;

If I inspect the global stylesheet on the frontend, everything seems to work as expected.

  • Now turn SCSS on in settings and go back into a page to edit the global stylesheet.
  • Change the CSS slightly (not even using SCSS):
.test {
    color: green;

Inspect the global stylesheet on the frontend and it still shows “color: red”. No matter what you change in the global stylesheet, it’s stuck with the initial CSS.

If I turn off SCSS in settings, then things seem to go back to normal. And yes, I did see that standard CSS is autoprefixing, which I had no idea it did and is super awesome!

I don’t know exactly what’s happening, but it seems to be linked to turning SCSS on. I can’t test if SCSS actually works because nothing ever changes if SCSS is turned on.

Hope this helps and maybe you’re able to reproduce it. I know you recently updated the SCSS option because it used to not stay toggled on. Now it stays toggled on, but seems to freeze the global stylesheet in it’s previous state.

Let me know if you need more details, or if you’re able to reproduce this. If not, I can go very methodically through the steps and try to document a more thorough step-by-step.


Hi there @msguerra74,

Sorry for not getting back earlier.
Thanks for the detailed steps.

Unfortunately, I’m not able to reproduce this issue on my side.
I do find it unusual that you are able to process the CSS when SCSS is toggled off but not on.

Could you possibly tell me if you are seeing errors in the browser console when trying to edit with SCSS toggled on?

Thanks in advance!

I’m not seeing any console errors or anything. The custom stylesheet works fine and updates when I change things. Once I activate SCSS, however, none of the changes I make to the global stylesheet take effect on the frontend. It only loads the styles that were set prior to activating SCSS. Once I deactivate SCSS, everything returns to working fine.

I’ve created a test install that you can log into, so I’ll send you the link and credentials. On the Home page, I have a simple “Hello World” paragraph with a virtual class of “test”. In the global stylesheet, I have the class set to display in red. You’ll see that it works fine no matter what color you change is to until you activate SCSS.

Let me know if you’re able to see anything that I might be missing, but it’s consistent across all of my testing so far.

That sounds very familiar to me.
It reads like I had the exact same issue in the past.
Unfortunately, I can’t remember what happened in detail.
It’s been a while, was testing the new scss functionality back then.

Only thing I know, in the end it turned out to be a user error.
Solved it by myself after some frustration, so there is no documentation about it here.

Hi all,

I’m currently testing Cwicly on a free install and I have the same issue, SCSS activated OR NOT, with this error in console:


Sometimes CSS is correctly updated and everything is OK on frontend, sometimes CSS is ignored with this error.

If it can help, I remember having this kind of issues with server caching on some hostings.

I also have some weird behaviour:


Third line is truncated in CSS file!

Hello @yankiara,

I’ve experienced connection issues with instawp quite a few times, especially when trying to access content (whatever the nature), have you tried different browsers? The HTTP2 protocol error doesn’t suggest a specific issue with Cwicly.

As you can see here, no issues loading the global stylesheet on my side.:

Is this from a global stylesheet? If so, can I see your backend input?

Hi @Louis!
And thanks for your reactivity!

Backend stylesheet:


Note that loading error is not systematic, more like random.

(It seems to work better when I don’t update stylesheet too often.)

I have other issues with SCSS, even backend…
That might not be related to this topic, but just in case.

Without SCSS, it is OK:


Same code with SCSS, does not work:


It seems there’s an issue with generated CSS:


And this one is not random, it is systematic.

Hi @yankiara,

I don’t think that format is correct in Sass?
You’ll want it to be: hsla($hue, $saturation, $lightness, $alpha)

It looks like both are accepted:

And anyway, it is also correct CSS, so it should work :wink:

(Right, hsla is legacy now, but same thing happens with hsl.)

There is definitely something wrong happening:

Here it looks like hsl syntax is not recognized and prevents the rest of the CSS to work as well.

If I deactivate SCSS, it is OK:

You are correct, but they say themselves that parsing the slash is difficult in some cases. I’m not 100% familiar with the reasons behind, but the Sass parser we’re using as well as quite a few online do give the same error when using your format: SASS/SCSS Playground

The issue I mentionned above uses coma format :arrow_up:

With hsl(), not hsla().

OK I get it, it is working with hsla :slight_smile:

BUT it should work with hsl, since it is correct CSS.

The SCSS preprocessor should respect CSS, shouldn’t it?

Or maybe I’m wrong and if you write SCSS, standard CSS is parsed anyway as SCSS? (And in this case the slash causes the error.)

Using WpCodeBox plugin, I had no issue like this with its SCSS preprocessor, but it’s just because it’s more permissive?

1 Like

Definitely :wink: I’ll take a look in the coming days and see if we can transfer towards another parser.
Sorry for the inconvenience on this one!

1 Like

With, we’ve moved the compiler server-side.
This should improve stability in the SCSS compiling and also fix the above issues with out of date syntax.

Thanks for your helpful comments on this @yankiara.

@Louis, could this have introduced some new issues?
I’m having trouble with my variables on the backend now. Did a backup restore to and it’s fine.
Here’s what’s happening:

Frontend looks okay, values pass through fine.

Native units work fine, but I use variables throughout.

I confirm new issue, all the variables generated in :root { } disappeared from backend :scream: