Live CSS reloading

Figwheel will hot reload your CSS files as you edit them.

You need to do four things for this to work:

ensure that you are providing your own HTML host page
include a link to your CSS in your host page HTML
ensure your CSS is in a public directory on the classpath
configure the :css-dirs config option

Including link to CSS file

Include a link tag to your CSS on your HTML host page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- we are including the CSS here -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="app">
    </div>
    <script src="cljs-out/dev-main.js" type="text/javascript"></script>
  </body>
</html>

Ensuring your CSS file can be served

The above example will work if you place your CSS file in a public/css directory on the classpath. Since the resources directory is normally on the classpath by convention we can place our CSS files resources/public/css.

Tell Figwheel to watch and reload CSS

You will use the :css-dirs config key to tell Figwheel to which directories to watch for CSS file changes.

You can do this one of two ways: in the build file or in the figwheel-main.edn file.

As an example let’s assume a dev.cljs.edn build file. You can add :css-dirs config to the metadata in the build file like so:

^{:css-dirs ["resources/public/css"]}
{:main example.core}

Or you can set it for all builds and compiles in the figwheel-main.edn:

{:css-dirs ["resources/public/css"]
 ;; rest of the config
 }

Then you restart your build:

clojure -m figwheel.main -b dev -r

Now you should be able to edit and save the resources/public/css/style.css file and see the changes rendered live in your application.

Host Page (index.html)← Back Next →Compile Configuration