Misc fixes related to updates for the bootstrap-sass-loader

Author: justin808

.gitignore

@@ -15,8 +15,8 @@
 /log/*.log
 /tmp
 /public/assets
-rails-bundle.js
-rails-bundle.js.map
+webpack-bundle.js
+webpack-bundle.js.map
 .env
 /node_modules
 npm-debug.log

Procfile.dev

@@ -1,2 +1,2 @@
 web: rails s -p 4000
-webpack: cd webpack && $(npm bin)/webpack -w --config webpack.bundle.config.js
+webpack: cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js

app/assets/images/.keep

@@ -54,3 +54,6 @@
 // Utility classes
 @import "bootstrap/utilities";
 @import "bootstrap/responsive-utilities";
+
+// This must come after all the boostrap styles are loaded so that these styles can override those.
+@import "app-styling-post-bootstrap-loading";

app/assets/stylesheets/_bootstrap-custom.scss

@@ -1,12 +1,12 @@
+// This variable $rails is used by bootstrap-custom so that fonts are loaded slightly differently
+// with Rails vs. the Webpack Dev Server
 $rails: true;
 
 // Those scss files are located under webpack/assets/stylesheets,
 // which has been added to the Rails asset pipeline search path.
 // See config/application.rb.
+@import "bootstrap-custom";
 @import "test-stylesheet";
 @import "test-sass-stylesheet";
 
 @import "bootstrap-sprockets";
-@import "bootstrap-custom";
-
-@import "pages"; // a custom font is defined there

app/assets/stylesheets/application.css.scss

@@ -7,13 +7,13 @@
  "node": "0.10.32"
  },
  "dependencies": {
- "bootstrap-sass": "~3.3.1",
- "bootstrap-sass-loader": "~0.0.4",
- "imports-loader": "^0.6.3",
  "body-parser": "^1.9.0",
+ "bootstrap-sass": "^3.3.1",
+ "bootstrap-sass-loader": "0.0.5",
  "bootstrap-webpack": "*",
  "es6-loader": "^0.2.0",
  "express": "^4.9.8",
+ "imports-loader": "^0.6.3",
  "jquery": "^2.1.1",
  "jsx-loader": "^0.11.2",
  "loader-utils": "^0.2.2",

app/assets/stylesheets/pages.css.scss

@@ -10,7 +10,14 @@ var render = () => {
  React.renderComponent(
  <div>
  <CommentBox url="comments.json" pollInterval={2000} />
- <div className="logo container">Brought to you by</div>
+ <div className="container">
+ <a href="http://www.railsonmaui.com">
+ <h3 className="open-sans-light">
+ <div className="logo"/>
+ Example of styling using image-url and Open Sans Light custom font
+ </h3>
+ </a>
+ </div>
  </div>,
  document.getElementById('content')
  );

npm-shrinkwrap.json

@@ -18,8 +18,12 @@ body {
  background-image: image-url("railsonmaui.png");
  background-repeat: no-repeat;
  background-position: left bottom;
- height: 60px;
- padding: 0;
+ height: 40px;
+ width: 146px;
+ margin-right: 10px;
+ display: inline-block;
+}
+.open-sans-light {
  font-family: 'OpenSans-Light'; // making use of custom fonts
 }