SASSify the stylesheet pipeline.

assets/brunch-config.js

@@ -20,7 +20,9 @@ exports.config = {
       // }
     },
     stylesheets: {
-      joinTo: "css/app.css"
+      joinTo: {
+        "css/app.css": "css/app.scss",
+      }
     },
     templates: {
       joinTo: "js/app.js"
@@ -37,7 +39,7 @@ exports.config = {
   // Phoenix paths configuration
   paths: {
     // Dependencies and current project directories to watch
-    watched: ["static", "css", "js", "vendor"],
+    watched: ["static", "css", "css/**", "js", "vendor"],
     // Where to compile files to
     public: "../priv/static"
   },
@@ -47,6 +49,15 @@ exports.config = {
     babel: {
       // Do not use ES6 compiler in vendor code
       ignore: [/vendor/]
+    },
+
+    sass: {
+      mode: 'native',
+      precision: 8,
+      allowCache: true,
+      options: {
+        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"]
+      }
     }
   },
 

assets/css/app.css

@@ -1 +0,0 @@
-/* This file is for your main application css. */

assets/css/app.scss

@@ -0,0 +1,5 @@
+@import "bootstrap";
+@import "components/all";
+
+/* Phoenix flash messages */
+.alert:empty { display: none; }

assets/css/components/_all.scss

@@ -0,0 +1,2 @@
+@import "blocks";
+@import "header";

assets/css/components/_blocks.scss

@@ -0,0 +1,9 @@
+.blocks {
+  @extend .table;
+
+  text-align: left;
+
+  td {
+    padding-right: 4em;
+  }
+}

assets/css/components/_header.scss

@@ -0,0 +1,10 @@
+.header {
+  &__logo {
+    @extend .img-responsive;
+    width: 5em;
+  }
+
+  &__title {
+    @extend h1;
+  }
+}

assets/package.json

@@ -6,6 +6,7 @@
     "watch": "brunch watch --stdin"
   },
   "dependencies": {
+    "bootstrap-sass": "^3.3.7",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },
@@ -13,6 +14,7 @@
     "babel-brunch": "6.1.1",
     "brunch": "2.10.9",
     "clean-css-brunch": "2.10.0",
+    "sass-brunch": "github:brunch/sass-brunch#7ffb2e6ebb7380f920a2f594476a3db0654b11b9",
     "uglify-js-brunch": "2.10.0"
   }
 }