How to convert theme.scss files to theme.css in Shopify themes?

How to convert theme.scss files to theme.css in Shopify themes?

SkoorySquirrel
Pathfinder
129 1 45

Shopify is notifying shop owners about the need to convert theme.scss files to theme.css files. They are saying that all free and paid Shopify themes in the future will have this conversion. 

Ok, that's good.

Looks like a .css file can be saved as a .scss file but not vice versa. But, how am I supposed to convert our theme.scss to .css - there aren't any guides or anything provided. So, I just downloaded the most recent version of our theme, but that is still using the old theme.scss file that Shopify told me they do not want!

Can someone shed some light on this issue, pls. Thanks.

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Replies 26 (26)

SHIBdev
Shopify Partner
334 24 92

same here, with VENTURE THEME

SkoorySquirrel
Pathfinder
129 1 45

Hi @SHIBdev,

If there were clear instructions, we may complete the task, but I couldn't find any guidance for the layperson who'd be happy to do some coding.

There is some info for developers. For example, looks like Mixins don't work with .css but could not find detail about converting them to .css - the Shopify pages assume that everybody understands how it's done!

It looks like Debut has been updated so far. And, Venture theme has not been updated yet, it seems.

So, why is Shopify sending messages to shop owners before converting all of their themes? 

 

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Antho3
Tourist
6 0 4

Same here with Brooklyn template.

Didn't find any options so far... (actually, i hope Brooklyn will be updated soon !)

SkoorySquirrel
Pathfinder
129 1 45

Hi @Antho3,

How do you know Brooklyn is next: were you informed by Shopify?

Perhaps Venture will be last on their to do list; 600 lines in the beginning of .scss appear to be code for Mixins. Think Debut's coding was easier to adapt maybe?

How do they expect people to do the conversion for 600 lines of Venture's theme.scss, if they do not explain the details?

 

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Ninthony
Shopify Partner
2343 354 1039

You can use a converter:

https://jsonformatter.org/scss-to-css

Should be fine. Just duplicate your theme, copy your theme.scss.liquid file and paste it into the converter, copy what comes out the other end and paste it into your theme.scss.liquid file. Save it, check your website and make sure all looks well, then publish 🙂

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
SkoorySquirrel
Pathfinder
129 1 45

Hi @Ninthony,

Tried some online code checkers etc before and can not say they worked well. In this case, there is a very long list of Mixin variables, and am not predicting whether all will be converted correctly. But, thanks for the suggestion, and I'll give it a go some time later today or tomorrow. Will let you know how it goes.

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Ninthony
Shopify Partner
2343 354 1039

Please do. While my stores theme doesnt use too many mixins, we'll be updating in the coming weeks too and this was my plan so I sure hope it goes alright lol. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
SkoorySquirrel
Pathfinder
129 1 45

Hi @Ninthony,

Not good news! Finds multiple parsing errors. Starts with not liking Line 231: 


fatal error: parse error: failed at `$color-btn-primary: {
{
settings.color_button_bg
}
}
;
` (stdin) on line 231


I deleted the whole primary button section beginning with Line 231 and tried again. It didn't like the following section on the secondary button either! And if I keep deleting sections, there will not be much of theme.scss left. What to do?

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Antho3
Tourist
6 0 4

Hi !

Did you find a solution to get by the SCSS / CSS issue ?

 

Cheer's

SkoorySquirrel
Pathfinder
129 1 45

Hi @Antho3 ,

Didn't find a solution. Then considered that Shopify may rewrite Venture. It could benefit from one, seems to me. I took a look at their new Debut. There were many changes. Thought in a good way. So I spent a day moving the website from Venture to Debut, rather than messing around with old code. I like coding because I like maths and logical languages, but I'm not trained as a coder. Just now I saw some other replies outlining how to fix the issue if using Venture. Will have a look and see whether they'd work. Thanks for your message!

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Not applicable

Wow, not working for me at all. I have an error, apparently in the first line, which I've never even touched (I have a super new store, barely started, so I have barely changed anything as of now, and definitely not on the first line). 

Error I got

fatal error: parse error: failed at `{
% comment %
}
` (stdin) on line 1

 

 

FG10
Tourist
8 0 9

the online converters won't work.

getting this (kind of) errors all the time;

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

adventmedia
Pathfinder
128 0 33

Yeah, it converts some of the theme scss files and other have multiple errors. But, even the file that had no errors (mmenu-styles) now completely wrecked the main menu. This SCSS deprecation is a nightmare. How the F does a platform do some shiat like this where the only out is to hire developers. I have even tried fiverr and guys there don't want to touch this.

Crazron
Tourist
3 0 1

When I do this I'm getting errors such as..

 

fatal error: parse error: failed at `$color-btn-primary: {
{
settings.color_button_bg
}
}
;
` (stdin) on line 231

FG10
Tourist
8 0 9

+1 , please help.
I get this error while trying to migrate/convert the .scss file to .css

Compilation Error
Error: Invalid CSS after " $color-text:": expected 1 selector or at-rule, was "{{ settings.color_t"
on line 338 of sass/Users/********/Desktop/css/theme.scss
>> $color-text: {{ settings.color_text }};
 
is there an 'easy' way for shop owners to fix this? 

Not applicable

So I searched this forum if anyone else has asked this or not. There is a thread where someone suggested getting the CSS from the browser (Inspect Element), copying it into a code editor, saving it as CSS, uploading it to assets, and then pointing to it in theme.liquid. 

I'm not sure what's going to happen when the themes will be updated, I guess, CSS? So far, for me, it worked. 

My store's speed score is the same, but my interface is super fast now. It was sometimes unbearably slow, so, I'll take this improvement. 😊 

 

Jennifer_Uecker
Tourist
18 0 2

Is this something we need to do now in our shops? Will it be automatically done in any way?

FG10
Tourist
8 0 9

Thanks @Anonymous , it worked!

 

HOW TO:

- Open Google Chrome : 'yourstore.myshopify.com' :

- Right click (on the page) : click on 'Inspect element' : click the arrow on the left (it opens) the '<head></head>' section :

- search for; ' <link href="//cdn.shopify.com/s/files/1/.../assets/theme.scss.css?v=12345678910" rel="stylesheet" type="text/css" media="all"> ' in the head section/code :
- Right click on the link : click on 'open in new tab' : a new tab with your website's css will open up :
- Select all text/code and copy (ctrl/cmd + c) it :
- Go to the 'Assets' folder in your Shopify account (yourstore.myshopify.com : online store : edit store : 'Assets' folder) :
- Click on 'add a new asset' and name it 'theme.css' :

- Paste (ctrl/cmd + v) the text/code in 'theme.css' :
- save it :

- Go to 'theme.liquid' and search for ' {{ 'theme.scss.css' | asset_url | stylesheet_tag }} ' :

- disable this line of code ( put the line between ' <!-- --> ' (or delete the whole line of code)) :

Add the line of code you copied at first, inside the <head></head> section;  ' <link href="//cdn.shopify.com/s/files/1/.../assets/theme.css?v=12345678910" rel="stylesheet" type="text/css" media="all"> ' (make shure you remove '.scss' !)

Save it.

I guess you could delete the 'old' .scss files (I didn't! ; because it's unclear for me what Shopify want's/is doing..and what works best)

 

Hope this is helpful (and a good/the right way)


Thank's @Anonymous and everybody for the answers and info!

WE GOT THIS! 😉 (little messy, i know..)

 

Annavittoria
Excursionist
37 0 17

@FG10can you please explain better what code did you applied into theme.liquid after you've created the new theme.css please?

FG10
Tourist
8 0 9

Hi @Annavittoria,

(old one)

<link href="//cdn.shopify.com/s/files/1/.../assets/theme.scss.css?v=12345678910" rel="stylesheet" type="text/css" media="all">

notice the '.scss'

(new one)
<link href="//cdn.shopify.com/s/files/1/.../assets/theme.css?v=12345678910" rel="stylesheet" type="text/css" media="all"> 

 

Annavittoria
Excursionist
37 0 17

@FG10i've just converted the string ' {{ 'theme.scss.css' | asset_url | stylesheet_tag }} '  into  ' {{ 'theme.css' | asset_url | stylesheet_tag }} '  so it will point on the new file.

Do you think it works anyway? It seems to work...

 

and please note that this string must be edited in many liquid files, like password.liquid and so on, because many things use to work with the old theme.scss....

I'm just searching for 'scss' in any files and editing them

FG10
Tourist
8 0 9

@Annavittoria ,

 

yes you're right.

Add the line into the 'layout' files.

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

 

Thanks!

 

Victoria35
Visitor
1 0 0

Thank you very much ❤️

adventmedia
Pathfinder
128 0 33

HOW THE EFF are we supposed to do this?QQ?Q@!##$$

adventmedia
Pathfinder
128 0 33

Sh!tify

metagals
Shopify Partner
29 1 0

 @FG10 that worked for me! I am also going to keep my SCSS code for now. Scared to delete it haha.

One extra step I took was taking all the copied CSS code and putting it into Dreamweaver and formatting it so that it's pretty and not all on one line.

There are a bunch of free code formatter programs available for those who don't use Adobe.