title: Live CSS layout: docs category: docs order: 7
Live CSS reloading
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
publicdirectory on the classpath - configure the
:css-dirsconfig 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.
Can you improve this documentation? These fine people already did:
Bruce Hauman, zakora & Jonathon McKitrickEdit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close