Using SCSS/SASS in Shopify

Question

Can't seem to get SCSS working in Shopify.

My CSS file name 'styles.scss.liquid':

$turquoise: #35d7db;

#toolbar {
  width: 100%;
  display: inline-block;
  background-color: $turquoise;
}

And my HTML in Shopify:

{{ 'styles.scss' | asset_url | stylesheet_tag }}

<div id='toolbar'>
    <p>Tools go here</p>
</div>

The color is not showing up, not at all sure what the problem is. Appreciate any advice.

Cheers, DB.

Answer 1

It should be {{ 'styles.scss.css' | asset_url | stylesheet_tag }} {{ 'styles.scss.css' | asset_url | stylesheet_tag }} {{ 'styles.scss.css' | asset_url | stylesheet_tag }} You need to add .css too.

Answer 2

Using Liquid in Sass files

When you compile Sass on Shopify servers, you'll create a style.scss.liquid file. Shopify then compiles the Liquid first, then the Sass, to create the final CSS file.

Source: A Beginner's Guide to Sass with Shopify — Part 3

Answer 3

Made this work using site.scss.liquid file in the /assets folder and adding it to the theme.liquid file between the head tags: {{ 'site.scss.css' | asset_url | stylesheet_tag }} {{ 'site.scss.css' | asset_url | stylesheet_tag }}

Documentation found in https://shopify.github.io/slate/docs/styles-with-liquid

For example, if you were to upload a styles.scss.liquid file, you could include it in your theme with the following markup:

 <link type="text/css" href="{{ 'styles.scss.css' | asset_url }}" rel="stylesheet">