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");