How to convert theme SCSS to CSS in Debut Theme?

JordanM
Explorer
61 2 10

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 

0 Likes
hardik355
Shopify Partner
124 10 19

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

0 Likes
JordanM
Explorer
61 2 10

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!

0 Likes
hardik355
Shopify Partner
124 10 19

hi  

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

0 Likes
sus1
Tourist
6 0 0

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!

0 Likes
hardik355
Shopify Partner
124 10 19

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

 

sus1
Tourist
6 0 0

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

 

0 Likes
hardik355
Shopify Partner
124 10 19

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! 

sus1
Tourist
6 0 0

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

0 Likes
hardik355
Shopify Partner
124 10 19

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!