├── .gitignore ├── LICENSE ├── README.md ├── bootstrap-sass-scripts.loader.js ├── bootstrap-sass-styles.loader.js ├── bootstrap-sass.config.js ├── bootstrap-sass.config.scss ├── index.js ├── index.loader.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Dylan Lukes (original: Scott Bleck) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bootstrap-webpack 2 | ================= 3 | 4 | Bootstrap configuration and loading package for webpack, using `bootstrap-sass`. 5 | 6 | Credit for the original goes to Scott Bleck (@bline). 7 | 8 | 9 | Usage 10 | ----- 11 | 12 | Bootstrap use some fonts. You need to configure the correct loaders in your `webpack.config.js`. Example: 13 | 14 | ``` javascript 15 | module.exports = { 16 | module: { 17 | loaders: [ 18 | // the url-loader uses DataUrls. 19 | // the file-loader emits files. 20 | { test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, 21 | { test: /\.ttf$/, loader: "file-loader" }, 22 | { test: /\.eot$/, loader: "file-loader" }, 23 | { test: /\.svg$/, loader: "file-loader" } 24 | ] 25 | } 26 | }; 27 | ``` 28 | 29 | ### Complete Bootstrap 30 | 31 | To use the complete bootstrap package including styles and scripts with the default settings: 32 | 33 | ``` javascript 34 | require("bootstrap-sass-webpack"); 35 | ``` 36 | 37 | ### Custom configuration 38 | 39 | You can configurate bootstrap-sass-webpack with two configuration files: 40 | 41 | * `bootstrap-sass.config.js` 42 | * `bootstrap-sass.config.scss` 43 | 44 | Add both files *next to each other* in your project. Then: 45 | 46 | ``` javascript 47 | require("bootstrap-sass-webpack!./path/to/bootstrap-sass.config.js"); 48 | ``` 49 | 50 | Or simple add it as entry point to your `webpack.config.js`: 51 | 52 | ``` javascript 53 | module.exports = { 54 | entry: [ 55 | "bootstrap-sass-webpack!./path/tobootstrap-sass.config.js", 56 | "your-existing-entry-point" 57 | ] 58 | }; 59 | ``` 60 | 61 | #### `bootstrap-sass.config.js` 62 | 63 | Example: 64 | 65 | ``` javascript 66 | module.exports = { 67 | scripts: { 68 | // add every bootstrap script you need 69 | 'transition': true 70 | }, 71 | styles: { 72 | // add every bootstrap style you need 73 | "mixins": true, 74 | 75 | "normalize": true, 76 | "print": true, 77 | 78 | "scaffolding": true, 79 | "type": true, 80 | } 81 | }; 82 | ``` 83 | 84 | #### `bootstrap-sass.config.scss` 85 | 86 | Imported after Bootstrap's default variables, but before anything else. 87 | 88 | You may customize Bootstrap here. 89 | 90 | Example: 91 | 92 | ``` scss 93 | @font-size-base: 24px; 94 | 95 | @btn-default-color: #444; 96 | @btn-default-bg: #eee; 97 | ``` -------------------------------------------------------------------------------- /bootstrap-sass-scripts.loader.js: -------------------------------------------------------------------------------- 1 | var scripts = [ 2 | 'transition', 3 | 'alert', 4 | 'button', 5 | 'carousel', 6 | 'collapse', 7 | 'dropdown', 8 | 'modal', 9 | 'tooltip', 10 | 'popover', 11 | 'scrollspy', 12 | 'tab', 13 | 'affix' 14 | ] 15 | 16 | module.exports = function () {}; 17 | module.exports.pitch = function (configPath) { 18 | this.cacheable(true); 19 | var config = require(configPath); 20 | return scripts.filter(function (script) { 21 | return config.scripts[script]; 22 | }).map(function (script) { 23 | return "require(" + JSON.stringify("bootstrap-sass/assets/javascripts/bootstrap/" + script) + ");"; 24 | }).join("\n"); 25 | } 26 | -------------------------------------------------------------------------------- /bootstrap-sass-styles.loader.js: -------------------------------------------------------------------------------- 1 | var partials = [ 2 | "mixins", 3 | 4 | "normalize", 5 | "print", 6 | 7 | "scaffolding", 8 | "type", 9 | "code", 10 | "grid", 11 | "tables", 12 | "forms", 13 | "buttons", 14 | 15 | "component-animations", 16 | "glyphicons", 17 | "dropdowns", 18 | "button-groups", 19 | "input-groups", 20 | "navs", 21 | "navbar", 22 | "breadcrumbs", 23 | "pagination", 24 | "pager", 25 | "labels", 26 | "badges", 27 | "jumbotron", 28 | "thumbnails", 29 | "alerts", 30 | "progress-bars", 31 | "media", 32 | "list-group", 33 | "panels", 34 | "wells", 35 | "close", 36 | 37 | "modals", 38 | "tooltip", 39 | "popovers", 40 | "carousel", 41 | 42 | "utilities", 43 | "responsive-utilities" 44 | ]; 45 | 46 | module.exports = function (content) { 47 | this.cacheable(true); 48 | var config = this.exec(content, this.resourcePath); 49 | var start = 50 | "@import \"~bootstrap-sass/assets/stylesheets/bootstrap/variables\";\n" 51 | + "@icon-font-path: \"~bootstrap-sass/assets/fonts/bootstrap/\";\n" 52 | + "@import \"./bootstrap-sass.config.scss\";\n"; 53 | source = start + partials.filter(function (partial) { 54 | return config.styles[partial]; 55 | }).map(function (partial) { 56 | return "@import \"~bootstrap-sass/assets/stylesheets/bootstrap/" + partial; 57 | }).join("\n"); 58 | return source; 59 | } 60 | -------------------------------------------------------------------------------- /bootstrap-sass.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | scripts: { 3 | 'transition': true, 4 | 'alert': true, 5 | 'button': true, 6 | 'carousel': true, 7 | 'collapse': true, 8 | 'dropdown': true, 9 | 'modal': true, 10 | 'tooltip': true, 11 | 'popover': true, 12 | 'scrollspy': true, 13 | 'tab': true, 14 | 'affix': true 15 | }, 16 | styles: { 17 | "mixins": true, 18 | 19 | "normalize": true, 20 | "print": true, 21 | 22 | "scaffolding": true, 23 | "type": true, 24 | "code": true, 25 | "grid": true, 26 | "tables": true, 27 | "forms": true, 28 | "buttons": true, 29 | 30 | "component-animations": true, 31 | "glyphicons": true, 32 | "dropdowns": true, 33 | "button-groups": true, 34 | "input-groups": true, 35 | "navs": true, 36 | "navbar": true, 37 | "breadcrumbs": true, 38 | "pagination": true, 39 | "pager": true, 40 | "labels": true, 41 | "badges": true, 42 | "jumbotron": true, 43 | "thumbnails": true, 44 | "alerts": true, 45 | "progress-bars": true, 46 | "media": true, 47 | "list-group": true, 48 | "panels": true, 49 | "wells": true, 50 | "close": true, 51 | 52 | "modals": true, 53 | "tooltip": true, 54 | "popovers": true, 55 | "carousel": true, 56 | 57 | "utilities": true, 58 | "responsive-utilities": true 59 | } 60 | }; 61 | 62 | -------------------------------------------------------------------------------- /bootstrap-sass.config.scss: -------------------------------------------------------------------------------- 1 | // Modify bootstrap variables here. 2 | 3 | // a example: 4 | // @body-bg: @gray-lighter; 5 | 6 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require("style!css!sass!./bootstrap-sass-styles!./bootstrap-sass.config.js"); 2 | require("./bootstrap-sass-scripts!./bootstrap-sass.config.js"); 3 | -------------------------------------------------------------------------------- /index.loader.js: -------------------------------------------------------------------------------- 1 | module.exports = function () {}; 2 | module.exports.pitch = function (remainingRequest) { 3 | this.cacheable(true); 4 | return [ 5 | 'require(' + JSON.stringify("-!" + require.resolve("style-loader") + '!' + require.resolve("css-loader") + 6 | '!' + require.resolve("sass-loader") + '!' + require.resolve("./bootstrap-sass-styles.loader.js") + '!' + remainingRequest) + ');', 7 | 'require(' + JSON.stringify("-!" + require.resolve("./bootstrap-sass-scripts.loader.js") + "!" + remainingRequest) + ');' 8 | ].join("\n"); 9 | }; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-sass-webpack", 3 | "description": "bootstrap-sass (v3.2) package for webpack", 4 | "main": "index.js", 5 | "version": "0.0.3", 6 | "loader": "index.loader.js", 7 | "keywords": [ 8 | "bootstrap", 9 | "webpack" 10 | ], 11 | "author": { 12 | "name": "Dylan Lukes " 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/DylanLukes/bootstrap-sass-webpack/issues" 16 | }, 17 | "dependencies": { 18 | "css-loader": "~0.7.0", 19 | "less-loader": "~0.7.5", 20 | "style-loader": "~0.6.4" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/DylanLukes/bootstrap-sass-webpack.git" 25 | }, 26 | "peerDependencies": { 27 | "bootstrap-sass": "~3.2.0" 28 | } 29 | } 30 | --------------------------------------------------------------------------------