Hot-deploy SCSS theme changes on file save

Community Guides
#1

Let’s suppose you have an application up and running and you want to change its visual appearance iteratively without server restart.

Regular solution for this: change SCSS, then run deployThemes gradle task, wait for build, then go to web browser and reset cache (Ctrl-F5).

Gradle build system has a really useful feature: continuous mode.

It enables you to start build that will automatically detect changes from a file system and run again. It is really useful if you develop SCSS theme.

Start in command line:

gradlew deployThemes --continuous

You will see the following output:

Waiting for changes to input files of tasks...

Open your halo-ext.scss file (the same applies to all the SCSS files in themes) and add something (be careful, it should be valid CSS):

.demo {}

Save file (Ctrl-S).

Gradle detects changes, then automatically builds and deploys them:

new file: /home/artamonov/projects/theme-hot-build/modules/web/themes/halo/com.company.themehotbuild/halo-ext.scss
Change detected, executing build...

BUILD SUCCESSFUL in 3s
2 actionable tasks: 2 executed

Waiting for changes to input files of tasks...

Voila! You can simply refresh styles in a web browser using Ctrl-F5 shortcut.

There is no need to start deployThemes task manually after each change of CSS.

14 Likes
#2

Thanks!