You need to do four things for this to work:
public directory on the classpath:css-dirs config optionInclude 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>
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.
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 builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |