How to convert SCSS to CSS in Narrative Theme

[Tian_C]

Hi, so recently I've got a warning:

"

SCSS support is deprecated in themes
Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.

"

Which is a little scary since while I can do some basic coding, converting .scss.liquid to .css.liquid sounds pretty daunting to me.

Is there an easy way to do this? All the online converters I know throw and error when it comes to liquid variables. Or will Narrative update its theme and convert this for us?

Would be great if anyone can answer this.

Thanks,

Tian

[ZestardTech]

Hello There,

convert SCSS to CSS online

https://jsonformatter.org/scss-to-css
https://www.cssportal.com/scss-to-css/
https://www.safetoconvert.com/scss-to-css-converter

[Zworthkey]

hey,

.scss is more faster then the .css

there are many tools to change the .scss code to the  .css

[Tian_C]

Sorry, I guess I wasn't clear here.

I think the main issue I have is converting .SCSS.liquid to .CSS.liquid

All the formatters shows a parsing error when it gets to liquid variables

Thanks,

Tian

[Moonizip]

Hi,

I'm also interested in this topic. I'm in the same situation as the OP.

I need to convert from .SCSS.liquid to .CSS.liquid because Shopify told me to do so. 

Unfortunately, the online tools suggested above don't work for this. 

Has anyone a solution?

Thanks 

[LBP]

An easy way is to just view a page that has the rendered css (on your store), view page source, find the file, and copy and paste the rendered css code to a new file. Then, upload the new file as an asset, and change the link in theme.liquid to point to your new file...note that this will result in a straight css file however. 

[Tian_C]

Thanks LBP, that may be my last resort. Without the .liquid, it won't be easy for my admin to adjust the website color. I'll leave the question open without solution for now in case someone has a better solution.

I appreciate your help

Tian

[Moonizip]

Thank you for the tip. I successfully did what you said.

However, I don't see any performance improvement in the Page Speed insights report, under "Eliminate render-blocking resources". It's exactly same as before. 

Shopify says in this article that migrating to css would increase page speed performance. What's the point of migrating then? :'( or maybe I didn't do things right?

[pradeept_bhanu]

I got the following error while using the online parsers:

fatal error: parse error: failed at `$color-text: {
{
settings.color_text
}
}
;
` (stdin) on line 345

[Muhammad_Hamza]

Hi, I also want to add some CSS to my website's home page. I want to add a live slider to the home. So, please suggest me some online tool or anything else to solve this issue.

[Anonymous]

yeah, I also tried converter, got an error on the first line despite the fact that I never changed it (made barely any edits yet). So I just extracted the code from Chrome, copied it into Sublime Text, saved as CSS, uploaded it to assets, and pointed to it in theme.liquid. 

I didn't notice anything happening faster as far as the "speed score" goes, but I immediately noticed the interface as being much faster for me. Which is helpful. 

Thanks a lot!

[garachhb]

I tried but tool is not working, the problem with shopify is that you have very limited resource to customize and increase the speed. Like Wordpress, there are plugins where you can minify js, HTML,csss but shopify doesn't have. As well as shopify should have system that once you update latest version then everything should be done automatically. but here Shopify notifies that "

SCSS support is deprecated in themes

Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.

- 

this is not a proper way to treat, not everybody are very good in coding. Also not everybody can also afford to pay to the developers.

[Jessy-clothes]

i had plak theme with lot of customization, i tried to hire people from fiverr,upwrok and freelancer and they all fail tu update my site while converting all the scss file to css.

Luckily plak theme have a custom task service, and they updated my theme for only 250$

[SLEVB]

Interesting as the text used Shopify shown below mentioned "better performing". i would see this as FASTER. You seem to know it is not

 I don't know myself if scss or css is faster but speed is so important and Google ranking is about the change and its very important we do everything to keep site super fast. I do hoep we are not taking a backwards step with this change

[NerdyCreative]

1. First you have to remove all the liquid variables from the .scss.liquid file,
2. Then use one of the Online tools to convert SCSS to CSS(e.g https://www.safetoconvert.com/scss-to-css-converter),
3. Create the .css.liquid file,
4. Add again the liquid variables on the .css.liquid file,
5. Done.

If you want to do this for you ping me at kontakt@nerdycreative.ch 🙂

[Tian_C]

I think I'm going to still leave this open until someone from Shopify creates an auto-conversion tool for us. Or the theme developer updates it for free and receive payment from Shopify itself.

I kinda get it that for development work, we should pay for developers. It's only fair. I used to work as a developer myself (albeit not a good one to be confident enough to do this task), so I understand completely. However, that should only be the case when we want something with added-value that would boost our sales.

We are already paying Shopify a monthly fee, which promises free theme, and all the basic associated e-commerce functions.

I don't understand why we should pay even more to make the website "functional" (as from what I understand Shopify will eventually stop working if we still have SCSS file?). 

It's quite disappointing actually.

For now I will do as what some has suggested (get the code from the inspector), but I can't believe they would let some poor merchant somewhere with absolutely no coding skills to someday be blind-sided by this.

[tmaasen648]

This link gives Shopify's suggestion on how best to handle this issue (see How to adjust your workflow) 

https://www.shopify.com/partners/blog/deprecating-sass 

[Petsareus]

Hi can you please dumb it down for me a bit more? Is there a special way that you extracted the.scss file from chrome? Did you use an extension or did you just copy and paste?

Also, what do you mean you pointed to it in theme.liquid? How did you "point" to it? 

Also, did you delete the old file theme.scssliquid after you uploaded the new .css from Sublime Text?

[LBP]

Go to online store -> actions -> edit code, locate theme.liquid

Within theme.liquid, look for something similar to this:  {{ 'theme.scss.css' | asset_url | stylesheet_tag }} ...don't touch it for now, just keep theme.liquid open.

Now go to your website (the front end...what your customers see) and view page source. Locate the reference to theme.css. Open it and copy and paste the contents of this file into notepad (or similar) and save it as custom_style.css.

Upload custom_style.css as an asset. This can be done on the same page where you located theme.liquid. On the left pain, scroll down to assets and click add new asset.

Go back to theme.liquid and update it to include your rendered css instead of the scss. Change {{ 'theme.scss.css' | asset_url | stylesheet_tag }} to {{ 'custom_style.css' | asset_url | stylesheet_tag }}

Save it.

[adventmedia]

That method resulted in a clustef*ck in the frontend.