Skip to content

Commit 3856dc8

Browse files
mbreiningmbreining
committed
Integrate with webpack ExtractTextPlugin
1 parent 7c6fb94 commit 3856dc8

File tree

8 files changed

+262
-21
lines changed

8 files changed

+262
-21
lines changed

‎Gemfile.lock‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ GEM
3939
execjs
4040
binding_of_caller (0.7.3.pre1)
4141
debug_inspector (>= 0.0.1)
42-
bootstrap-sass (3.2.0.1)
43-
sass (~> 3.2)
4442
builder (3.2.2)
4543
byebug (3.2.0)
4644
columnize (~> 0.8)
@@ -161,7 +159,6 @@ PLATFORMS
161159

162160
DEPENDENCIES
163161
autoprefixer-rails
164-
bootstrap-sass (~> 3.2.0)
165162
byebug
166163
coffee-rails (~> 4.0.0)
167164
jbuilder (~> 2.0)

‎app/assets/stylesheets/application.css.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import "../../../webpack/assets/stylesheets/test-stylesheet";
22
@import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
3+
@import "bootstrap-and-customizations";

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"bootstrap-sass": "~3.3.1",
1111
"bootstrap-sass-loader": "~0.0.4",
1212
"imports-loader": "^0.6.3",
13-
"extract-text-webpack-plugin": "~0.3.5",
1413
"body-parser": "^1.9.0",
1514
"bootstrap-webpack": "*",
1615
"es6-loader": "^0.2.0",

‎webpack/_bootstrap-customizations.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// ## Customize Variables
2+
3+
// This gets loaded after bootstrap/variables is loaded, so you can refer to bootstrap variables
4+
// Remove borders around `<pre>` block so the code
5+
// flows with our right column layout.
6+
$pre-border-color: $pre-bg; // hide the border.
7+
8+
// This makes the font on the buttons and the text BIG
9+
$font-size-base: 18px;
10+

‎webpack/_main.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// This file is used as part of the bootstrap-sass-loader customization
2+
// Compare this to main.scss (no underscore) which is loaded by itself
3+
// ## Baseline
4+
5+
// Included from bootstrap.config.less.
6+
body {
7+
padding-top: 20px;
8+
}
9+
10+
#main-entry-point {
11+
color: pink;
12+
}
13+
14+
.doc-content {
15+
padding-top: 10px;
16+
}
17+
18+
// ## Nav
19+
// When nav is affixed, set it's position and size.
20+
#nav.affix {
21+
position: fixed;
22+
top: 3px;
23+
width: 80%;
24+
z-index: 10;
25+
}
26+
27+
// ## Code
28+
// Set up table to render two column view
29+
// of documentation on left and code, syntax
30+
// highlighted on the right.
31+
table.file-table {
32+
width: 100%;
33+
border-radius: $border-radius-base;
34+
border: 0px;
35+
border-spacing: 0px;
36+
display: table;
37+
table-layout: fixed;
38+
39+
td.file-docs {
40+
background-color: #fff;
41+
width: 30%;
42+
max-width: 30%;
43+
text-overflow: ellipsis;
44+
padding: 5px;
45+
vertical-align: top;
46+
}
47+
48+
td.file-code {
49+
border-left: 1px groove darken(#f5f5f5, 20%);
50+
background-color: #f5f5f5;
51+
color: #333;
52+
width: 70%;
53+
max-width: 70%;
54+
text-overflow: ellipsis;
55+
padding-left: 5px;
56+
vertical-align: bottom;
57+
}
58+
// Remove extra separation between the code
59+
// so it looks more like one continuous block.
60+
pre.prettyprint {
61+
padding: 0 !important;
62+
border: 0 !important;
63+
margin: 0 0 !important;
64+
}
65+
}
66+

‎webpack/bootstrap-sass.config.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
module.exports = {
2+
bootstrapCustomizations: "./_bootstrap-customizations.scss",
3+
mainSass: "./_main.scss",
4+
5+
// Default for the style loading is to put in your js files
6+
// styleLoader: "style-loader!css-loader!sass-loader";
7+
8+
// If you want to use the ExtractTextPlugin
9+
// and you want compressed
10+
// styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
11+
// or if you want expanded CSS
12+
// styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass?outputStyle=expanded"),
13+
14+
// ### Scripts
15+
// Any scripts here set to false will never
16+
// make it to the client, it's not packaged
17+
// by webpack.
18+
scripts: {
19+
'transition': true,
20+
'alert': true,
21+
'button': true,
22+
'carousel': true,
23+
'collapse': true,
24+
'dropdown': true,
25+
'modal': true,
26+
'tooltip': true,
27+
'popover': true,
28+
'scrollspy': true,
29+
'tab': true,
30+
'affix': true
31+
},
32+
// ### Styles
33+
// Enable or disable certain less components and thus remove
34+
// the css for them from the build.
35+
styles: {
36+
"mixins": true,
37+
38+
"normalize": true,
39+
"print": true,
40+
41+
"scaffolding": true,
42+
"type": true,
43+
"code": true,
44+
"grid": true,
45+
"tables": true,
46+
"forms": true,
47+
"buttons": true,
48+
49+
"component-animations": true,
50+
"glyphicons": true,
51+
"dropdowns": true,
52+
"button-groups": true,
53+
"input-groups": true,
54+
"navs": true,
55+
"navbar": true,
56+
"breadcrumbs": true,
57+
"pagination": true,
58+
"pager": true,
59+
"labels": true,
60+
"badges": true,
61+
"jumbotron": true,
62+
"thumbnails": true,
63+
"alerts": true,
64+
"progress-bars": true,
65+
"media": true,
66+
"list-group": true,
67+
"panels": true,
68+
"wells": true,
69+
"close": true,
70+
71+
"modals": true,
72+
"tooltip": true,
73+
"popovers": true,
74+
"carousel": true,
75+
76+
"utilities": true,
77+
"responsive-utilities": true
78+
}
79+
};

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
var ExtractTextPlugin = require("extract-text-webpack-plugin");
2+
3+
module.exports = {
4+
verbose: true, // Set to true to show diagnostic information
5+
6+
bootstrapCustomizations: "./_bootstrap-customizations.scss",
7+
mainSass: "./_main.scss",
8+
9+
// Default for the style loading is to put in your js files
10+
// styleLoader: "style-loader!css-loader!sass-loader",
11+
// If you want to use the ExtractTextPlugin
12+
// and you want compressed
13+
//styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
14+
15+
// If you want expanded CSS
16+
styleLoader: ExtractTextPlugin.extract("style-loader",
17+
"css-loader!sass-loader?outputStyle=expanded"),
18+
//{ publicPath: "../" }),
19+
20+
// ### Scripts
21+
// Any scripts here set to false will never
22+
// make it to the client, it's not packaged
23+
// by webpack.
24+
scripts: {
25+
'transition': true,
26+
'alert': true,
27+
'button': true,
28+
'carousel': true,
29+
'collapse': true,
30+
'dropdown': true,
31+
'modal': true,
32+
'tooltip': true,
33+
'popover': true,
34+
'scrollspy': true,
35+
'tab': true,
36+
'affix': true
37+
},
38+
// ### Styles
39+
// Enable or disable certain less components and thus remove
40+
// the css for them from the build.
41+
styles: {
42+
"mixins": true,
43+
44+
"normalize": true,
45+
"print": true,
46+
47+
"scaffolding": true,
48+
"type": true,
49+
"code": true,
50+
"grid": true,
51+
"tables": true,
52+
"forms": true,
53+
"buttons": true,
54+
55+
"component-animations": true,
56+
"glyphicons": true,
57+
"dropdowns": true,
58+
"button-groups": true,
59+
"input-groups": true,
60+
"navs": true,
61+
"navbar": true,
62+
"breadcrumbs": true,
63+
"pagination": true,
64+
"pager": true,
65+
"labels": true,
66+
"badges": true,
67+
"jumbotron": true,
68+
"thumbnails": true,
69+
"alerts": true,
70+
"progress-bars": true,
71+
"media": true,
72+
"list-group": true,
73+
"panels": true,
74+
"wells": true,
75+
"close": true,
76+
77+
"modals": true,
78+
"tooltip": true,
79+
"popovers": true,
80+
"carousel": true,
81+
82+
"utilities": true,
83+
"responsive-utilities": true
84+
}
85+
};

‎webpack/webpack.rails.config.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,21 @@
22
// cd webpack && webpack -w --config webpack.rails.config.js
33

44
var path = require("path");
5+
var ExtractTextPlugin = require("extract-text-webpack-plugin");
56
var railsBundleFile = "rails-bundle.js";
67
var railsJsAssetsDir = "../app/assets/javascripts";
7-
var railsBundleMapFile = railsBundleFile + ".map";
8-
var railsBundleMapRelativePath = "../../../public/assets/" + railsBundleMapFile;
8+
//var railsBundleMapFile = railsBundleFile + ".map";
9+
//var railsBundleMapRelativePath = "../../../public/assets/" + railsBundleMapFile;
910

1011
module.exports = {
1112
context: __dirname,
1213
entry: [
13-
// to expose something Rails specific, uncomment the next line
14-
//"./scripts/rails_only",
14+
//"./scripts/rails_only", // uncomment to expose Rails specific
1515
"./assets/javascripts/example",
1616

17-
// Alternative for including everything with no customization
18-
'bootstrap-sass-loader'
19-
//
20-
// Example of using customization file
21-
//'bootstrap-sass!./bootstrap-sass.config.js'
22-
//
23-
// Example of using customization file with ExtractTextPlugin
24-
//"bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js"
17+
//'bootstrap-sass-loader' // include all bootstrap
18+
//'bootstrap-sass!./bootstrap-sass.config.js' // use custom bootstrap file
19+
'bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js' // use custom bootstrap file w/ ExtractTextPlugin
2520
],
2621
output: {
2722
filename: railsBundleFile,
@@ -41,18 +36,27 @@ module.exports = {
4136
// bootstrap-sass-loader has access to the jQuery object
4237
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
4338
{ test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
44-
{ test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
45-
{ test: /\.ttf$/, loader: "file-loader" },
46-
{ test: /\.eot$/, loader: "file-loader" },
47-
{ test: /\.svg$/, loader: "file-loader" },
39+
// Load Bootstrap's CSS
40+
// Needed for the css-loader when [bootstrap-sass-loader]
41+
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
42+
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" },
43+
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
44+
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" },
45+
//{ test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
46+
//{ test: /\.ttf$/, loader: "file-loader" },
47+
//{ test: /\.eot$/, loader: "file-loader" },
48+
//{ test: /\.svg$/, loader: "file-loader" },
4849

4950
{ test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
5051
// Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
5152
// in the Rails Asset Pipeline. Thus, load this one prior.
5253
{ test: require.resolve("jquery"), loader: "expose?jQuery" },
5354
{ test: require.resolve("jquery"), loader: "expose?$" }
5455
]
55-
}
56+
},
57+
plugins: [
58+
new ExtractTextPlugin("../stylesheets/bootstrap-and-customizations.css")
59+
]
5660
};
5761

5862
var devBuild = (typeof process.env["BUILDPACK_URL"]) === "undefined";

0 commit comments

Comments
 (0)