.scss and .css

Anonymous
Not applicable
1661 0 0

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 5

+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? 
0 Likes
FG10
Tourist
8 0 5

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

0 Likes
Anonymous
Not applicable
1661 0 0

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
17 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 5

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
28 0 15

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

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
28 0 15

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

@Annavittoria ,

 

yes you're right.

Add the line into the 'layout' files.

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

 

Thanks!