How do I write and compile scss for my theme?

Highlighted
Tourist
11 0 1

I've set up ThemeKit on my local and have pulled down my site files (Minimal Theme). I want to start customising the theme, starting with .css.

How do I organise all my .scss files and then compile them into a .css file the live Shopify site can use?

0 Likes
Shopify Partner
865 6 145

Hi,

That would be quite a tutorial to write up on a forum. Have you read the documentation that has a lot of info how to get started? One thing to be aware of is that Theme Kit is just for down / upload sync of your theme assets.

You may actually be interested in using Slate instead. It's a much more complete theme development workflow that might suite you better if you are new to Shopify theme dev.

SCSS files will be compiled by Shopify but be aware that they use a quite antique version at 3.2.6 so don't use anything newer when developing locally.

Have a look at the Slate docs. I'd also recommend you begin with a starter theme.

Let us know if you get stuck or something isn't clear along the way.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Tourist
11 0 1

Thanks Karl,

Yes I've tried Slate, but I really struggled with it and, to be honest, found the documentation rather lacking. I think I'd like to get familiar with Shopify themes themselves before diving into Slate.

I see that the Shopify server compiles SCSS for you when you push your code up. But can we still seperate our .scss files out and compile them into a central file (I like to have typography and colors set on their own files)?

0 Likes
Shopify Partner
865 6 145

But... and that's a biggie, Shopify server doesn't support @import statements in your SCSS.

I turn coffee in to code - since 1998
0 Likes
Tourist
11 0 1

Ok, I've kind of done a work around.

I have a seperate SCSS folder where all my .scss files live. Using Gulp I then compile them. However, gulp-sass compiles to .css, so to get around this I used gulp-rename to both rename the .css file to .scss.liquid and move it into the assets folder.

Seems to work so far.

0 Likes