How to convert SCSS to CSS in Narrative Theme

Tian_C
Tourist
6 0 10

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

Pallavi
Shopify Expert
2235 370 484

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Zworthkey
Shopify Partner
551 38 87

hey,

.scss is more faster then the .css

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

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
Tian_C
Tourist
6 0 10

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
Tourist
9 0 8

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
New Member
2 0 3

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
Tourist
6 0 10

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
Tourist
9 0 8

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
Tourist
4 0 3

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
New Member
2 0 0

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.

0 Likes