Add bootstrap-sass gem; Use bootstrap-sass loader with local webpack dev server

Author: mbreining

Gemfile

@@ -12,6 +12,7 @@ gem 'rails_12factor'
 
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0.0.beta1'
+gem 'bootstrap-sass', '~> 3.3.1'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .js.coffee assets and views
@@ -37,6 +38,8 @@ gem 'rails-html-sanitizer', '~> 1.0'
 # Use Unicorn as the app server
 gem 'unicorn'
 
+gem 'autoprefixer-rails'
+
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development
 
@@ -53,5 +56,3 @@ group :development, :test do
   # Manage application processes
   gem 'foreman'
 end
-
-gem 'autoprefixer-rails'

Gemfile.lock

@@ -39,6 +39,8 @@ GEM
       execjs
     binding_of_caller (0.7.3.pre1)
       debug_inspector (>= 0.0.1)
+    bootstrap-sass (3.3.1.0)
+      sass (~> 3.2)
     builder (3.2.2)
     byebug (3.2.0)
       columnize (~> 0.8)
@@ -163,6 +165,7 @@ PLATFORMS
 
 DEPENDENCIES
   autoprefixer-rails
+  bootstrap-sass (~> 3.3.1)
   byebug
   coffee-rails (~> 4.0.0)
   foreman

README.md

@@ -29,8 +29,7 @@ Setup node and run the node server.
 
 ```
 npm install
-cd webpack && webpack --config webpack.hot.config.js
-node server.js
+cd webpack && node server.js
 ```
 
 Point browser to [http://0.0.0.0:3000]().

app/assets/stylesheets/application.css.scss

@@ -1,3 +1,4 @@
 @import "../../../webpack/assets/stylesheets/test-stylesheet";
 @import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
-@import "bootstrap-and-customizations";
+@import "bootstrap-sprockets";
+@import "bootstrap";

webpack/_bootstrap-customizations.scss

@@ -7,4 +7,3 @@ $pre-border-color: $pre-bg; // hide the border.
 
 // This makes the font on the buttons and the text BIG
 $font-size-base: 18px;
-

webpack/assets/javascripts/CommentBox.jsx

@@ -7,7 +7,6 @@ module React from 'react/addons';
 // the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
 // require("expose?React!react");
 
-
 var Input = require('react-bootstrap/Input');
 var Button = require('react-bootstrap/Button');
 var Row = require('react-bootstrap/Row');

webpack/bootstrap-sass.config.js

@@ -12,10 +12,10 @@ module.exports = {
     'transition': true,
     'alert': true,
     'button': true,
-    'carousel': true,
+    'carousel': false,
     'collapse': true,
     'dropdown': true,
-    'modal': true,
+    'modal': false,
     'tooltip': true,
     'popover': true,
     'scrollspy': true,

webpack/bootstrap-sass.extract-text.config.js

@@ -0,0 +1,75 @@
+//var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  bootstrapCustomizations: "./_bootstrap-customizations.scss",
+  mainSass: "./_main.scss",
+
+  // Default for the style loading is to put in your js files
+  // styleLoader: "style-loader!css-loader!sass-loader";
+  // styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader"),
+
+  // ### Scripts
+  // Any scripts here set to false will never make it to the client,
+  // i.e. it's not packaged by webpack.
+  scripts: {
+    'transition': true,
+    'alert': true,
+    'button': true,
+    'carousel': true,
+    'collapse': true,
+    'dropdown': true,
+    'modal': false,
+    'tooltip': true,
+    'popover': true,
+    'scrollspy': true,
+    'tab': true,
+    'affix': true
+  },
+  // ### Styles
+  // Enable or disable certain less components and thus remove
+  // the css for them from the build.
+  styles: {
+    "mixins": true,
+
+    "normalize": true,
+    "print": true,
+
+    "scaffolding": true,
+    "type": true,
+    "code": true,
+    "grid": true,
+    "tables": true,
+    "forms": true,
+    "buttons": true,
+
+    "component-animations": true,
+    "glyphicons": true,
+    "dropdowns": true,
+    "button-groups": true,
+    "input-groups": true,
+    "navs": true,
+    "navbar": true,
+    "breadcrumbs": true,
+    "pagination": true,
+    "pager": true,
+    "labels": true,
+    "badges": true,
+    "jumbotron": true,
+    "thumbnails": true,
+    "alerts": true,
+    "progress-bars": true,
+    "media": true,
+    "list-group": true,
+    "panels": true,
+    "wells": true,
+    "close": true,
+
+    "modals": true,
+    "tooltip": true,
+    "popovers": true,
+    "carousel": true,
+
+    "utilities": true,
+    "responsive-utilities": true
+  }
+};

webpack/scripts/rails_only.jsx

@@ -4,5 +4,3 @@
 // Showing this for example purposes
 // require("expose?$!jquery");
 // require("expose?jQuery!jquery");
-
-

webpack/scripts/webpack_only.jsx

@@ -1,11 +1,7 @@
-// These are only loaded by only by the webpack server
+// These are only loaded by the webpack dev server
 
-// Option to load stylesheets via webpack
 require("test-stylesheet.css");
-
-// Test out sass
-require("test-sass-stylesheet.scss");
+require("test-sass-stylesheet.scss"); // test out sass
 
 require("expose?$!jquery");
 require("expose?jQuery!jquery");
-require("bootstrap-webpack");

webpack/server.js

@@ -8,9 +8,10 @@ var comments = [{author: 'Pete Hunt', text: 'Hey there!'},
                 {author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}];
 
 var server = new WebpackDevServer(webpack(config), {
+  //contentBase: "/public",
   publicPath: config.output.publicPath,
   hot: true,
-  stats: { colors: true}
+  stats: {colors: true}
 });
 
 server.app.use(bodyParser.json());
@@ -31,7 +32,7 @@ server.app.post('/comments.json', function(req, res) {
   res.send(JSON.stringify(comments));
 });
 
-server.listen(3000, 'localhost', function (err, result) {
+server.listen(3000, 'localhost', function(err, result) {
   if (err) { console.log(err); }
-  console.log('Listening at localhost:3000');
+  console.log('Listening at localhost:3000...');
 });

webpack/webpack.common.config.js

@@ -11,7 +11,8 @@ module.exports = {
   //   jquery: "var jQuery"
   // },
   resolve: {
-    root: [path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
+    root: [path.join(__dirname, "scripts"),
+           path.join(__dirname, "assets/javascripts"),
            path.join(__dirname, "assets/stylesheets")],
     extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".scss", ".css", "config.js"]
   },
@@ -22,8 +23,7 @@ module.exports = {
       { test: /\.css$/, loader: "style-loader!css-loader" },
       { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
 
-      // the url-loader uses DataUrls.
-      // the file-loader emits files.
+      // The url-loader uses DataUrls. The file-loader emits files.
       { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
       { test: /\.ttf$/,    loader: "file-loader" },
       { test: /\.eot$/,    loader: "file-loader" },

webpack/webpack.hot.config.js

@@ -1,10 +1,26 @@
+// Run like this:
+// cd webpack && $(npm bin)/webpack -w --config webpack.hot.config.js
+// or:
+// cd webpack && node server.js
+
 var config = require("./webpack.common.config");
 var webpack = require("webpack");
+//var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
+// Add the following entries as appropriate:
+// "bootstrap-sass-loader" -> all bootstrap assets
+// "bootstrap-sass!./bootstrap-sass.config.js" -> custom bootstrap
+// "bootstrap-sass!./bootstrap-sass.extract-text.config.js" -> custom bootstrap w/ ExtractTextPlugin
 config.entry.push("webpack-dev-server/client?http://localhost:3000",
                   "webpack/hot/dev-server",
-                  "./scripts/webpack_only");
-config.output = { filename: "express-bundle.js", // this file is never saved on disk
+                  "./scripts/webpack_only",
+                  "bootstrap-sass!./bootstrap-sass.config.js");
+                  //"bootstrap-sass!./bootstrap-sass.extract-text.config.js");
+config.output = { filename: "express-bundle.js", // this file is served directly by webpack
                   path: __dirname };
+//config.module.loaders.push(
+//  { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
+//);
 config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
+                   //new ExtractTextPlugin("bootstrap-and-customizations.css") ];
 module.exports = config;

webpack/webpack.rails.config.js

@@ -1,22 +1,13 @@
-// Run like this
-// cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
+// Run like this:
+// cd webpack && $(npm bin)/webpack -w --config webpack.hot.config.js
 
 var config = require("./webpack.common.config");
-var path = require("path");
 
-// Add the following entries as appropriate:
-// "./scripts/rails_only" --> rails specific assets
-// "bootstrap-sass-loader" --> all bootstrap assets
-// "bootstrap-sass!./bootstrap-sass.config.js" --> custom bootstrap
-config.entry.push("./assets/javascripts/example",
-                  "bootstrap-sass!./bootstrap-sass.config.js");
+config.entry.push("./scripts/rails_only"); // rails specific assets
 config.output = { filename: "rails-bundle.js",
                   path: "../app/assets/javascripts" };
 config.externals = { jquery: "var jQuery" }; // load jQuery from cdn or rails asset pipeline
 config.module.loaders.push(
-  // **IMPORTANT** This is needed so that each bootstrap js file required by
-  // bootstrap-sass-loader has access to the jQuery object
-  { test: /bootstrap-sass\/assets\/javascripts\//, loader: "imports?jQuery=jquery" },
   { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
   // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
   // in the Rails Asset Pipeline. Thus, load this one prior.