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

[SkoorySquirrel]

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.

[SHIBdev]

same here, with VENTURE THEME

[SkoorySquirrel]

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? 

[Antho3]

Same here with Brooklyn template.

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

[SkoorySquirrel]

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?

[Ninthony]

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 🙂

[SkoorySquirrel]

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.

[Ninthony]

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. 

[SkoorySquirrel]

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?

[Antho3]

Hi !

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

Cheer's

[SkoorySquirrel]

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!

[Anonymous]

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]

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]

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]

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]

+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? 

[Anonymous]

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]

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

[FG10]

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]

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

[FG10]

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]

@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]

@Annavittoria ,

yes you're right.

Add the line into the 'layout' files.

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

Thanks!

[Victoria35]

Thank you very much ❤️

[adventmedia]

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

[adventmedia]

Sh!tify

[metagals]

 @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.