How to convert theme SCSS to CSS in Debut Theme?

Technical Q&A
1

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
CSS.JPG1606×189 21.3 KB

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

2

hi JordanM

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

3

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!

4

hi JordanM

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

5

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!

6

Hi sus1

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

1 Like
7

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

8

Hi sus1

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!

1 Like
9

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

10

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!

1 Like
11

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

12

Hi sus1

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