SASS watcher

Bruce Hauman edited this page Aug 30, 2016 · 7 revisions

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.