Member-only story
Complete guide to Shopify theme SCSS live reload
Tiffany explains pretty well how to set up SCSS live reload. This article adds some information for you who struggle.
The idea for SCSS live reload is that you have to have an app, that will watch your SCSS files, and when one will change, it will process your project’s SCSS files generating new template.css file. And then theme-kit (when you configured it) will bring that file to the Shopify.
The applications also should reload your browser when something changes.
The app that does that is called Prepros.
To set it up:
- Install it
- Drop your project on the app
- Right click any liquid file and choose to watch all liquid files (it will reload the app for liquid changes)
- Locate your template.scss file (e.g. scss/templates/theme.scss). Click path in the “output file” and indicate a location “src\assets\theme.css”
- Start your theme-kit
What should happen is that after changing any of your scss files, Prepros will log that theme.scss file was processed to theme.css. A while after, theme-kit should tell you it synced it to the Shopify, and your browser should reload.
To set up the browser refresh you have to go Server icon in right top, click “External server”, choose “Use external server” and paste URL where you want to see changes. Then you can open the browser with CTRL+L.
