Fix bootstrap-sass config to properly load images (#7); Add webpack png file as example and test

Author: mbreining

app/assets/images/webpack.png

@@ -1,8 +1,7 @@
 // This file is used as part of the bootstrap-sass-loader customization
-// Compare this to main.scss (no underscore) which is loaded by itself
 // ## Baseline
 
-// Included from bootstrap.config.less.
+// Included from bootstrap-sass.config.js
 body {
  padding-top: 20px;
 }
@@ -15,6 +14,13 @@ body {
  padding-top: 10px;
 }
 
+.webpack-image {
+ background-image: image-url("webpack.png");
+ background-repeat: no-repeat;
+ background-position: right bottom;
+ height: 120px;
+}
+
 // ## Nav
 // When nav is affixed, set it's position and size.
 #nav.affix {
@@ -63,4 +69,3 @@ table.file-table {
  margin: 0 0 !important;
  }
 }
-

webpack/_main.scss

@@ -11,6 +11,7 @@ var render = () => {
  <div>
  <CommentBox url="comments.json" pollInterval={2000} />
  <div className="twitter-image container"/>
+ <div className="webpack-image container"/>
  </div>,
  document.getElementById('content')
  );

webpack/assets/javascripts/example.jsx

@@ -1,3 +1,4 @@
+// These variables get loaded BEFORE Bootstrap thus overriding them in Bootstrap.
 $body-bg: #EFF8FB; // background w/ character
 $navbar-default-bg: #FFFFE0; // fancy yellow navbar
 $font-size-base: 15px; // make it bigger!

webpack/assets/stylesheets/_bootstrap-variables-customization.scss

@@ -6,7 +6,11 @@ module.exports = {
  mainSass: "./_main.scss",
 
  // Default for the style loading is to put in your js files
- // styleLoader: "style-loader!css-loader!sass-loader";
+ // styleLoader: "style-loader!css-loader!sass-loader",
+
+ // See: https://github.com/sass/node-sass#outputstyle
+ // https://github.com/sass/node-sass#imagepath
+ styleLoader: "style-loader!css-loader!sass-loader?imagePath=/assets/images",
 
  // ### Scripts
  // Any scripts here set to false will never make it to the client,

webpack/bootstrap-sass.config.js

@@ -11,6 +11,7 @@ var server = new WebpackDevServer(webpack(config), {
  //contentBase: "/public",
  publicPath: config.output.publicPath,
  hot: true,
+ noInfo: false,
  stats: {colors: true}
 });
 

webpack/server.js

@@ -1,4 +1,4 @@
-// Common webpack configuration used by webpack.hot.config and webpack.bundle.config.
+// Common webpack configuration used by webpack.hot.config and webpack.rails.config.
 
 var path = require("path");
 

webpack/webpack.common.config.js

@@ -4,6 +4,8 @@
 var config = require("./webpack.common.config");
 var webpack = require("webpack");
 
+// We're using the bootstrap-sass loader.
+// See: https://github.com/justin808/bootstrap-sass-loader
 config.entry.push("webpack-dev-server/client?http://localhost:3000",
  "webpack/hot/dev-server",
  "./scripts/webpack_only",