-
Notifications
You must be signed in to change notification settings - Fork 816
Non JS Assets
The :foreign-libs feature provided by Clojurescript does not have
any support for non-JavaScript files like CSS files and images.
Many JavaScript libraries depend on additional assets like CSS and images.
This page documents some approaches to using these CSS or images files in your application.
less4clj and sass4clj can import files directly from classpath. This makes it easy to embed files from jar dependencies in CSS.
To find the correct file path check the build.boot file for the package or inspect the jar file, e.g. by opening the jar file in you local maven repo (~/.m2/repo) with archive file manager.
To inline the css file contents one can use (inline) import directive: http://lesscss.org/features/#import-directives-feature.
@import (inline) "cljsjs/production/fixed-data-table.min.inc.css";Sass4clj will inline the css file contents if you do not include .css file extension in the import path. Including the file extension would result in css @import rule being written.
@import "cljsjs/production/fixed-data-table.min.inc";To serve files so that you can refer to them from e.g. script or img, one can use
Ring-cljsjs
A minimal layer over the sift task above intended to take full paths as arguments.
WARNING This will break as soon as multiple files from a single jar are imported. A fix is left as an exercise to the reader.
(deftask from-jars
"Import files from jars (e.g. CLJSJS) and move them to the desired location in the fileset."
[i imports IMPORT #{[sym str str]} "Tuples describing imports: [jar-symbol path-in-jar target-path]"]
(let [add-jar-args (into {} (for [[j p] imports] [j (re-pattern (str "^" p "$"))]))
move-args (into {} (for [[_ p t] imports] [(re-pattern (str "^" p "$")) t]))]
(sift :add-jar add-jar-args :move move-args)))
(task-options!
from-jars {:imports #{['cljsjs/emojione
"cljsjs/emojione/common/sprites/emojione.sprites.svg"
"public/img/emojione.sprites.svg"]}})