cyinwei · May 9, 2016 03:18 · Feb 23, 2016
diff --git a/README b/README
@@ -0,0 +1,5 @@
+1) install npm packages
+2) update brunch-config.js
+3) remove Bootstrap from web/static/css/app.css
+4) rename web/static/css/app.css to web/static/css/app.scss
+5) update web/static/css/app.scss
diff --git a/app.scss b/app.scss
@@ -0,0 +1,2 @@
+$icon-font-path: "/fonts/"; /* use fonts from priv/static/fonts/ */
+@import "bootstrap"; /* imports node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss */
diff --git a/brunch-config.js b/brunch-config.js
@@ -0,0 +1,27 @@
+exports.config = {
+  plugins: {
+    sass: {
+      includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"], // tell sass-brunch where to look for files to @import
+      precision: 8 // minimum precision required by bootstrap-sass
+    },
+    copycat: {
+      "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"] // copy node_modules/bootstrap-sass/assets/fonts/bootstrap/* to priv/static/fonts/
+    }
+  },
+  modules: {
+    autoRequire: {
+      "js/app.js": [
+        "bootstrap-sass", // require bootstrap-sass' JavaScript globally
+        "web/static/js/app"
+      ]
+    }
+  },
+  npm: {
+    enabled: true,
+    whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap-sass"], // pull jquery and bootstrap-sass in as front-end assets
+    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
+      $: 'jquery',
+      jQuery: 'jquery'
+    }
+  }
+}
diff --git a/install-npm-packages.sh b/install-npm-packages.sh
@@ -0,0 +1 @@
+npm install --save bootstrap-sass sass-brunch jquery copycat-brunch
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$icon-font-path: "/fonts/"; /* use fonts from priv/static/fonts/ */
		@import "bootstrap"; /* imports node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		npm install --save bootstrap-sass sass-brunch jquery copycat-brunch