Having issues with ThemeKit, .scss and .scss.liquid

Pacific_Hustle
Shopify Partner
19 0 8

I recently upgraded a purchased theme, "EMPIRE", and I'm locally developing my theme using ThemeKit and whenever I try to theme deploy, I'm getting the following error:

image.png

This also causes issues with:

assets/theme.scss and assets/theme.scss.liquid

I'm not sure how to resolve this issue, I was looking earlier for some discusses but the posts I found were unresolved. My theme relies on both of these files as I can see some liquid that links something like 

{{ 'theme.scss.css' | asset_url | stylesheet_tag }} which is the SASS version.
 
If someone could help me out, I'd really appreciate it. 
 
Thank you.
 
0 Likes
PaulNewton
Shopify Partner
2576 134 438

Could you please share the urls of some of the unresolved posts you found?

And could you confirm if themekit is what downloaded the separate .scss and .scss.liquid files?

 


@Pacific_Hustle wrote:

image.png

assets/theme.scss and assets/theme.scss.liquid

{{ 'theme.scss.css' | asset_url | stylesheet_tag }} which is the SASS version.

Here's the thing they are generally the same file at different steps of processing( or development): *.scss.liquid|*.scss|*.scss.css.

*.scss.liquid lets you use liquid with the SASS language THEN shopify automatically generates the rendered SASS *.scss file THEN  compiles that to *.css file which is served by the CDN using the asset_url filter*.

 

Notes: *Though typically in the shopify themes admin you will not actually see a file with .scss or .scss.css extension.

 Why not just serve .scss files directly to users? Well browsers don't know what a .scss file is, CSS is the standard so preprocessing languages like SASS and LESS require a compilation step to convert there syntactic sugar to pure browser consumable CSS.

 

What probably happened was either:

  1. the entire theme file was downloaded using export in the admin which sends a zip of ALL files including rendered scss|css
  2. .scss files weren't removed once they were made into liquid files
  3. tooling made these files from a base css file to convert to liquid
  4. you used a theme that includes them both for some reason

Always backup your theme before making changes to your theme

Quick fix: delete the .scss files

Slower: compare both and figure out which is meant to be the source of truth, 90% for most users will be the .liquid file to be able to use theme settings within css, rest of the time will because you have some build process that starts with SASS to take advantage of the it's tooling ecosystem.

 

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Pacific_Hustle
Shopify Partner
19 0 8

@PaulNewton wrote:

Could you please share the urls of some of the unresolved posts you found?

And could you confirm if themekit is what downloaded the separate .scss and .scss.liquid files?

 


@Pacific_Hustle wrote:

image.png

assets/theme.scss and assets/theme.scss.liquid

{{ 'theme.scss.css' | asset_url | stylesheet_tag }} which is the SASS version.

Here's the thing they are generally the same file at different steps of processing( or development): *.scss.liquid|*.scss|*.scss.css.

*.scss.liquid lets you use liquid with the SASS language THEN shopify automatically generates the rendered SASS *.scss file THEN  compiles that to *.css file which is served by the CDN using the asset_url filter*.

 

Notes: *Though typically in the shopify themes admin you will not actually see a file with .scss or .scss.css extension.

 Why not just serve .scss files directly to users? Well browsers don't know what a .scss file is, CSS is the standard so preprocessing languages like SASS and LESS require a compilation step to convert there syntactic sugar to pure browser consumable CSS.

 

What probably happened was either:

  1. the entire theme file was downloaded using export in the admin which sends a zip of ALL files including rendered scss|css
  2. .scss files weren't removed once they were made into liquid files
  3. tooling made these files from a base css file to convert to liquid
  4. you used a theme that includes them both for some reason

Always backup your theme before making changes to your theme

Quick fix: delete the .scss files

Slower: compare both and figure out which is meant to be the source of truth, 90% for most users will be the .liquid file to be able to use theme settings within css, rest of the time will because you have some build process that starts with SASS to take advantage of the it's tooling ecosystem.

 

 

 


Hi Paul, you're correct, I downloaded the entire .zip file from Admins->Themes and tried to move it to my development store theme by replacing all the contents in the folder of the live theme with the downloaded zip. 

 

So your recommended course of action would be to .scss? I tried to understand the longer route but didn't quite get it.

 

If I delete the .scss files and leave only the .scss.liquid when deployed would Shopify automatically create separate .scss files?

0 Likes
Pacific_Hustle
Shopify Partner
19 0 8

@PaulNewton wrote:

Could you please share the urls of some of the unresolved posts you found?

And could you confirm if themekit is what downloaded the separate .scss and .scss.liquid files?

 


@Pacific_Hustle wrote:

image.png

assets/theme.scss and assets/theme.scss.liquid

{{ 'theme.scss.css' | asset_url | stylesheet_tag }} which is the SASS version.

Here's the thing they are generally the same file at different steps of processing( or development): *.scss.liquid|*.scss|*.scss.css.

*.scss.liquid lets you use liquid with the SASS language THEN shopify automatically generates the rendered SASS *.scss file THEN  compiles that to *.css file which is served by the CDN using the asset_url filter*.

 

Notes: *Though typically in the shopify themes admin you will not actually see a file with .scss or .scss.css extension.

 Why not just serve .scss files directly to users? Well browsers don't know what a .scss file is, CSS is the standard so preprocessing languages like SASS and LESS require a compilation step to convert there syntactic sugar to pure browser consumable CSS.

 

What probably happened was either:

  1. the entire theme file was downloaded using export in the admin which sends a zip of ALL files including rendered scss|css
  2. .scss files weren't removed once they were made into liquid files
  3. tooling made these files from a base css file to convert to liquid
  4. you used a theme that includes them both for some reason

Always backup your theme before making changes to your theme

Quick fix: delete the .scss files

Slower: compare both and figure out which is meant to be the source of truth, 90% for most users will be the .liquid file to be able to use theme settings within css, rest of the time will because you have some build process that starts with SASS to take advantage of the it's tooling ecosystem.

 

 

 


Hi Paul, you're correct, I downloaded the entire .zip file from Admins->Themes and tried to move it to my development store theme by replacing all the contents in the folder of the live theme with the downloaded zip. 

 

So your recommended course of action would be to .scss? I tried to understand the longer route but didn't quite get it.

 

If I delete the .scss files and leave only the .scss.liquid when deployed would Shopify automatically create separate .scss files?

 

As for the links, I'll try and go back and run the Google searches for them.

0 Likes
Shinya_Koizumi
Shopify Partner
4 0 0

I have the exactly same issue with *.js files(myfile.js and myfile.js.liquid) but I can't delete those files. I have pipeline set up for beanstalk app to deploy the shopify theme. If I delete the .js and push to the repository the build breaks because the shopify complains your file(*.js) can't be deleted or updated. Do I have some workaround?

0 Likes