Skip to content

Instantly share code, notes, and snippets.

@zehnpaard

zehnpaard/min-css.core.cljs

Created November 18, 2016 22:18
Show Gist options
  • Save zehnpaard/e5fa2f6ee64d2b72217aba07f7f35dbc to your computer and use it in GitHub Desktop.
Save zehnpaard/e5fa2f6ee64d2b72217aba07f7f35dbc to your computer and use it in GitHub Desktop.
Download ZIP
Minimal ClojureScript/Reagent/Figwheel setup for automatic CSS loading
Raw
min-css.core.cljs
(ns min-css.core
(:require
[reagent.core :as r]))
(defn my-app []
[:div
[:h1 "Hello Reagent"]
[:p "Some random text in a regular p tag"]
[:p.my-class "More random text in a my-class p tag"]])
(r/render
[my-app]
(js/document.getElementById "app"))
Raw
min-css.directories.txt
.
├── project.clj
├── resources
│   └── public
│   ├── css
│   │   └── main.css
│   └── index.html
└── src
└── min_css
└── core.cljs
Raw
min-css.index.html
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="js/out/goog/base.js"></script>
<script src="js/main.js"></script>
<script>goog.require('min_css.core')</script>
</body>
</html>
Raw
min-css.main.css
body {
background: #ddd;
}
h1 {
color: #f00;
}
p {
font: 18px "Century Gothic", Futura, sans-serif;
}
.my-class {
font-size: 12px;
background: #ddf;
}
Raw
min-css.project.clj
(defproject min-css "0.0.1"
:dependencies [[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.293"]
[reagent "0.6.0"]]
:plugins [[lein-cljsbuild "1.1.4"]
[lein-figwheel "0.5.7"]]
:figwheel {:css-dirs ["resources/public/css"]}
:cljsbuild
{:builds {:dev {:source-paths ["src"]
:figwheel true
:compiler {:output-to "resources/public/js/main.js"
:output-dir "resources/public/js/out/"
:optimizations :none}}}})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment