I’ve updated everything to the latest build (1.2.8.6.1) 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!
P.S.
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.
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.
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.
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?
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.
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.:
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
With 1.2.9.2.3, 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 1.2.9.2.2 and it’s fine.
Here’s what’s happening:
