Live Reloading Shopify Themes: Sass Compilation with Theme Kit and Prepros

No one likes refreshing their browser every time you make a change to HTML, CSS, and JS during development. It takes time, and time is something we all wish we had more of.

In this tutorial we will take you through integrating Prepros into a Theme Kit development workflow, step-by-step, so you no longer need to manually reload your browser to see changes. For this tutorial, we’ll use a few different tools:Theme Kit,command line, a text editor of your choice, andPrepros．

1. Install and connect Theme Kit

Before we get into hooking up live reloading with Prepros, you’ll need to have already set upTheme Kitwith the theme you will be working on. To do this you can follow the instructions provided through theTheme Kit tutorial．I’m going to cover two ways of using live reloading with Shopify Themes; with regular old CSS files, and with Sass (SCSS) compilation.

Runtheme watch

The final step with Theme Kit is to run thetheme watchcommand. This ensures that the changes you make directly to a CSS file, whether through Prepros SCSS compilation or direct editing, are tracked and then synced to Shopify’s servers and your store.

2. Link your styles to theme.liquid

Using CSS in an existing theme

To customize an existing theme, you’ll need to either add in a new stylesheet or amend an existing one. For small tweaks to the existing theme, I suggest adding an additional stylesheet for your changes, or appending changes to the CSS at the bottom of the original CSS file.

To add an additional custom CSS file, simply go into thelayoutdirectory, and locate thetheme.liquidfile. In theof your markup, add in the following code,afterthe original stylesheet:

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

In the example above,custom.cssis the name of the new CSS file you wish to link into your existing theme.

Setting up brand new SCSS files and directories in a theme

For those already familiar with SCSS, this should make some sense. If you’ve never set up a SCSS project before you might wantto learn about SCSS first．

In the case where you want to set up your own SCSS structure for a theme with live reloading, I suggest using a similar approach to how we build themes at Shopify. We use a combination ofSMACSSguidelines, andBEMCSS naming conventions. If you’re unfamiliar with these concepts, I urge to you read more about them; they are great best practices for building scalable systems.

When setting up the SCSS folder structure (the example below is just showing styles), it might look something like this:

|-assets |-theme.css // this is the final compiled CSS consumed by your theme template |-styles |-global |-modules |-settings |-tools |-vendor |-theme.scss // this file compiles into assets/theme.css

Wherestyles/theme.scsscompiles toassets/theme.css．

You can placeSCSS partialsin the subdirectories ofstyles/, and@importall the partials intotheme.scss．Using the@import指令是一个基本的SCSS project setup, so that you can easily see and control the order of all modular styles in a project.

For this tutorial, I’ve created a_header.scsspartial inside the modules directory, and then used an@importstatement in mytheme.scss, to link everything together.

We can then attach the styles by linking totheme.cssinside ourtheme.liquidfile, in the:

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

将一个现有样式表导入到你的SCSS圣ructure

Additionally, you might want to import an existing stylesheet into your fancy new SCSS folder structure. You can do this provided that theexisting file doesn’t include any Liquid objects.Prepros can’t compile Liquid, thus the compiler will error-out if you try to use a file containing Liquid objects with a．liquidextension.

If the stylesheet doesn’t have any Liquid objects, you can simply copy the stylesheet file intovendor/, and rename into a partial with a preceding_, such as_name-of-file.scss．Then@importthe stylesheet into the top oftheme.scss．

Note: when importing partials, there’s no need to include the_in your@importstatement.

Your styles folder is ignored automatically

In Shopify Themes, any additional top level directories are ignored by both Theme Kit and Shopify servers. Even if you .zip the theme and upload it, you’ll find that thestyles/directory isn’t included.

This is totally fine — just note that you should make sure to save the whole theme, with all the working files (ie. yourstyles/directory) onGithub, or some other form of version control.

3. Link Prepros to your development store

Now that we’ve figured out which files we want to edit (CSS or SCSS), and set those up, we can now dig into Prepros!

Add your theme as a project

First, add your theme as a project to Prepros, by simply dragging the entire directory into the Prepros app. Alternatively, you can click on the+at the bottom left of the Prepros app, to add a project.

Prepros will create aprepros.configfile in your project directory. This file contains the configuration settings for your project, such as where certain assets get compiled, whether you’ve enabled various settings, and so on. If you’re using Git, you may want to add a rule to your．gitignore, so that you don’t track or commit changes for your Prepros configuration (unless you want to).

Choose which files to watch, and what you want to compile where

By default, Prepros will be watching for changes to any files inside your project.If you just want to get live reloading working with your CSS file, you don’t need to do much more configuration.

However, if you’ve set up the SCSS folder structure outlined above, you’ll want to make sure that Prepros knows where to output the compiledstyles/theme.scssfile.

To change where thetheme.scssfile gets output, simply click on the file you want to change the output path for, and then select the directory you wish it to output to. By default, it will be in the same directory, but for building Shopify Themes we want it to output into theassets/directory.

Watching Liquid files

Additionally, consider adding．liquidfiles to the list of file types Prepros will watch. They aren’t watched by default, since Prepros doesn’t compile Liquid. However, because Shopify will render the．liquidfiles appropriately, we simply need to trigger a live reload when there’s a change to a Liquid file.

To add．liquidfiles to the watch list, right click on any．liquidfile, and selectWatch All .liquid Files．

You might also like:An Overview of Liquid: Shopify's Templating Language．

Link live preview to your store url

The next step is to set the url for the live preview of your store. This is what links Prepros with your live Shopify store, and gets the live reloading to work. You’ll need to do this if you want to use live reloading with CSS or SCSS.

To do this, go toSettings>Live Previewand setCustom Server．Now, simply fill in theServer Urlwith yourmyshopifystore url.

Set a delay for live reloading

Finally, you’ll need to set a delay in Prepros for the live reloading. The reason for the delay is to allow Theme Kit the time it needs to notice a change, and sync the changes with Shopify’s servers.

InSettings>Live Reloadyou have the option to set a delay. I’ve found that when using SCSS, the delay needs to be longer than if you’re reloading directly from changes in the CSS file. The reason for this with SCSS, is that we need one extra step, the compilation of the SCSS files, so it takes a bit longer.

If you’re working directly in a CSS file, the delay can probably be around 1000ms. If you’re using SCSS compilation within Prepros, the delay should be at least 1500ms. If you find live reloading isn’t working, increase the delay, it’s most likely that the reload is happening before the updated CSS makes it to the Shopify servers.

5. Live preview and make a change!

Now that you’ve set up Live Preview, click on theicon to launch it in your default browser. This will be the tab or window that will automatically reload when a change is made to your theme.

What’s happening under the hood

So how is all this working together? Let me explain.

When you make a change in your text editor, let’s say in a SCSS partial like_header.scss,theme.scssfile that uses@importas a directive to import the partial, gets compiled by Prepros intotheme.css．The compiledtheme.cssis then updated in the assets folder, again by Prepros.

Once Prepros is finished compiling, it does a live reload of your browser on the port that it has control over, and you see port in the url bar of the live preview provided by Prepros. But wait! We’ve set a delay, so this pauses the triggering of live reload for 1500ms.

Meanwhile, Theme Kit detects the change to the updated CSS file, and syncs it with the Shopify servers.

Our1500msdelay is over now, and the updated CSS is on our Shopify store. Prepros triggers the live reload in theLive Preview, and voila! You have live reloading with Prepros and Theme Kit!

You’re on your way to faster development

That’s it! Live reloading should be working now. Simply make a style change or update a template, and wait for Prepros to live reload your browser for you.

Some limitations of Prepros with Shopify

Liquid objects can’t be rendered inside SCSS files with Prepros

Like I mentioned before, because Prepros doesn’t compile Liquid we don’t have access to our theme’ssettingsobject. So you won’t be able to do something like:

h2 { color: {{ settings.color_primary }} }

Source maps

From my explorations, the source maps in Prepros don’t seem to work consistently, so debugging can be a bit difficult, especially if you have a lot of files. But Prepros will still tell you when there are compilation errors in the log, with a file, or line number error message, all while you work. So I don’t think it’s a huge problem.

Additional benefits of Prepros

有大量的灵巧的工具,常用with Prepros—feel free to readthe full listif you want to learn about them all. I want to mention a few that I think are the most useful for theme developers below:

File Minification

You configure Prepros to automagically minify your compiled CSS for you, or set a minified version. This is awesome because it means that you can improve the performance of your site, simply by checking a box.

Prefix Free

Hate writing prefixes? Turn on the Prefix Free option for compiled files, and never worry about which CSS properties need prefixes.

Sass, Less, and Stylus compilation

Shopify doesn’t natively support Less or Stylus, but with Prepros you can use your favorite CSS preprocessor. Simply replace the SCSS files with Less or Stylus extensions and syntax, Prepros will do the compilation, and Theme Kit will modify the updated compiled CSS file to Shopify’s servers.