SASS watcher

This example shows how to add a SASS watcher to your Figwheel start script.

This is just a dummy example to show you how to launch a process if you are using the lower level figwheel-sidecar component composition.

The most straightforward way to use a CSS preprocessor is to simply launch the preprocessor from the command line and make sure the target directory for the output CSS files is a directory configured in your :css-dirs parameter. See lein-cooper for a familiar way to launch processes from lein.

Make sure you're using Figwheel 0.5.0+ and have SASS installed.

Project layout

.
├── resources
│   └── public
│       └── css
├── sass
├── script
├── src
│   └── main
│       └── sample

Start script

For more information on the basics of the following script, read Scripting with component.

Note the main differences:

• the :css-dirs option is set. Figwheel will now automatically start a CSS watcher so we don't have to add one ourselves.
• added sass-config.
• added SassWatcher component. Uses java.lang.Runtime to create a long running process.
• added the component to the system-map.
• removed app-server. Not needed for this example.

(require
 '[figwheel-sidecar.repl-api :as ra]
 '[com.stuartsierra.component :as component])

(import 'java.lang.Runtime)

(def figwheel-config
  {:figwheel-options {
                      :css-dirs ["resources/public/css"]
                      }
   :build-ids ["dev"]
   :all-builds
   [{:id "dev"
     :figwheel true
     :source-paths ["src/main"]
     :compiler {:main "sample.core"
                :asset-path "out"
                :output-to "resources/public/sample.js"
                :output-dir "resources/public/out"
                :verbose true}}]})

(def sass-config
  {:executable-path "sass" ; e.g. /usr/local/bin/sass
   :input-dir "sass" ; location of the sass/scss files
   :output-dir "resources/public/css"})

(defrecord Figwheel []
  component/Lifecycle
  (start [config]
    (ra/start-figwheel! config)
    config)
  (stop [config]
    (ra/stop-figwheel!)
    config))

(defrecord SassWatcher [executable-path input-dir output-dir]
  component/Lifecycle
  (start [config]
    (if (not (:sass-watcher-process config))
      (do
        (println "Figwheel: Starting SASS watch process")
        (assoc config :sass-watcher-process
               (.exec (Runtime/getRuntime)
                      (str executable-path " --watch " input-dir ":" output-dir))))
      config))
  (stop [config]
    (when-let [process (:sass-watcher-process config)]
      (println "Figwheel: Stopping SASS watch process")
      (.destroy process))
    config))

(def system
  (atom
   (component/system-map
    :figwheel (map->Figwheel figwheel-config)
    :sass (map->SassWatcher sass-config))))

(defn start []
  (swap! system component/start))

(defn stop []
  (swap! system component/stop))

(defn reload []
  (stop)
  (start))

(defn repl []
  (ra/cljs-repl))

;; Start the components and the repl
(start)
(repl)

Assuming the above script is in script/figwheel.clj you can invoke it as follows:

rlwrap lein run -m clojure.main --init script/figwheel.clj -r

Your SASS/SCSS files will now be compiled to CSS files in the background. The CSS watcher configured by Figwheel will automatically reload the changes inside the browser.