Extending Bootstrap with Webpack

readme.md

To build, simply copy all files into a directory and run:

npm install

Followed by:

npm run webpack

This gist corresponds to this question on stack overflow

app.js

// Application level code of course goes here.
// For instance loading configuration and dependencies.
// In this example, loading all the necessary web components
// will be taken care of by a "components" module.
require('./components');

components.js

// This module simply includes all of the web components
// that the application will need.
require('./panel');
require('./tabs');

package.json

{
	"private": true,
	"scripts": {
		"webpack": "webpack"
	},
	"dependencies": {
		"bootstrap-sass": "^3.3.7"
	},
	"devDependencies": {
		"css-loader": "^0.26.1",
		"extract-text-webpack-plugin": "^1.0.1",
		"file-loader": "^0.9.0",
		"node-sass": "^4.2.0",
		"sass-loader": "^4.1.1",
		"style-loader": "^0.13.1",
		"webpack": "^1.14.0"
	}
}

panel.js

// This component would bundle all of the templates, stylesheets, and
// scripts needed to create a customized version of bootstrap's panel.
require('./panel.scss');

panel.scss

// Since this component extends the panel functionality of bootstrap,
// it would likely start by extending its "panel" class.
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

tabs.js

// This component would bundle all of the templates, stylesheets, and
// scripts needed to create a customized version of bootstrap's tabs.
require('./tabs.scss');

tabs.scss

// Since this component extends the tab functionality of bootstrap,
// it would likely start by extending its "nav-tabs" class.
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: {
		'app': './app.js',
	},
	output: {
		path: 'output',
		filename: 'bundle.js'
	},
	plugins: [
		new ExtractTextPlugin('[name].css')
	],
	module: {
		loaders: [
			{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', ['css', 'sass']) },
			{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file', query: { name: '[name].[ext]'} }
		]
	}
};