How to convert theme SCSS to CSS in Debut Theme?

JordanM
Pathfinder
100 4 19

Hi guys,

so recently while editing my theme.scss code I stumbled upon a message that tells me that it is advisable that I update my SCSS to CSS or my website's performance may drop. Here is the message:

CSS.JPG

I have made many changes to the standard Debut theme and don't know how i can update it with all that changes.

I will be pleased if anyone helps.

Thanks in advance,

Jordan 

Replies 11 (11)

hardik355
Shopify Partner
234 22 34

hi  

 

Please read this shopify blog you can understood easy. https://www.shopify.in/partners/blog/deprecating-sass

If you have questions, just let me know.
Please Contact Skype: live:hardikradadiya355
E-mail: psams7803@gmail.com
Thanks

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks
JordanM
Pathfinder
100 4 19

Hi @hardik355 ,

the link that you sent me doesn't work. Would you mind sending me a working one or another one that works?

Thank you!

hardik355
Shopify Partner
234 22 34

hi  

I think i have same issue but i will create filename.css.liquid it will works.

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks
sus1
Excursionist
12 0 3

Hi Hardik355, can you please explain how are you going to do that?
I tried converted my scss theme file in css with jsonformatter but I think that a lot of functions disappeared.
And now I don't know how to test this css file in my debut theme.
Thanks for the help!

hardik355
Shopify Partner
234 22 34

Hi  

I'm not understand you have json file and you convert to css. it's not possible. json file code add another file. but you want check then please follow this step please Go to Online Store->Theme->Edit code then go to assets/ create new file anyname.css. then follow this step.

  1. Create a new scss.liquid file in your Theme/Assets Folder.
  2. Go to Theme.liquid and add this code

           {{ 'filename.css' | asset_url | stylesheet_tag }}

 

If helpful then please Like and Accept Solution.
Shopify theme and app developer.
Skype: live:hardikradadiya355
Thanks

 

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks
sus1
Excursionist
12 0 3

Hi Hardik355, thanks for your quick answer.
No, I did not convert a json file, i converted the theme.scss, I did it in this website https://jsonformatter.org/scss-to-css, but, as I wrote, I think that a lot of functions disappeared.
I will try to do what you wrote me and let you know.

Best regards

 

hardik355
Shopify Partner
234 22 34

Hi  

Now i'm understand what is the exact issue you facing. but l'm using latest theme then i didn't get the issue. can you tell me which theme are you using. and also share store url. Otherwise contact me in skype so i will try to fix you problem.  You can checking other way. 

  1.  create clone your master theme.
  2.  create new css file i already add in above conversion how to create new css.
  3.  your scss.css file only css data convert and paste new csv and check.
  4. Then check your store design not breaking. 

NOTE: Please take clone your master theme. 

OR 

Directly ask shopify support team so you can get proper solution. here is link 

https://help.shopify.com/en/questions#/contact

Thanks!

 

Thanks! 

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks
sus1
Excursionist
12 0 3

Thanks a lot!
I'm trying to follow your steps... but I have a doubt, should I delete in theme.liquid the following: {{ 'theme.scss.css' | asset_url | stylesheet_tag }} ?
Or should I keep it and only add {{ 'newfilename.css' | asset_url | stylesheet_tag }} ?

My site is https://www.erborian.pt/ with Debut theme, first installed in december 2019.

Best regards

hardik355
Shopify Partner
234 22 34

Hi sus1

In theme.liquid just comment this line {{ 'theme.scss.css' | asset_url | stylesheet_tag }}  when you comment style sheet not loading. And load your new file and check after add css. 

Thanks!

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks
sus1
Excursionist
12 0 3

Thanks a lot hardik355!
It worked.

I just put a like in your answers but I don't find where to "accept the solution" !?

Best regards

hardik355
Shopify Partner
234 22 34

Hi  

Thanks for replay don't worry about that if you need any help let me know i will help you. please contact skype.

 

Skype: live:hardikradadiya355
Thanks

 

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks