gowravshekar / bootstrap-webpack

bootstrap package for webpack

bootstrap-webpack

bootstrap package for webpack.

This is the less version. If you are looking for the sass version, refer to bootstrap-sass-loader.

Usage

Bootstrap use some fonts. You need to configure the correct loaders in your webpack.config.js. Example:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  }
};

Bootstrap javascript components depends on jQuery. This uses imports-loader of webpack. Install imports-loader by npm install imports-loader --save-dev.

Complete Bootstrap

To use the complete bootstrap package including styles and scripts with the default settings:

require("bootstrap-webpack");

Custom configuration

You can configurate bootstrap-webpack with two configuration files:

• bootstrap.config.js
• bootstrap.config.less

Add both files next to each other to your project. And:

require("bootstrap-webpack!./bootstrap.config.js");

Or simple add it as entry point to your webpack.config.js:

module.exports = {
  entry: [
    "bootstrap-webpack!./bootstrap.config.js",
    "your-existing-entry-point"
  ]
};

Using with other js loaders.

If you are using other loaders for all js files(test: /\.js$/), this might interfere with bootstrap-webpack. You can override the configuration loader order in the module request to suit special cases.

• adding ! to a request will disable configured preLoaders

require("!bootstrap-webpack!./bootstrap.config.js")

• adding !! to a request will disable all loaders specified in the configuration

require("!!bootstrap-webpack!./bootstrap.config.js")

• adding -! to a request will disable configured preLoaders and loaders but not the postLoaders

require("-!bootstrap-webpack!./bootstrap.config.js")

Check details in webpack loader order

You can also change your configuration, so that other loaders are not applied to bootstrap.

1. Use exclude option of the module.loaders section of the config.
2. Adjust the regex in test option of the module loaders to prevent matching all the js files to which the loaders are applied.

See the explanation of different module options under module.loaders

bootstrap.config.js

Example:

module.exports = {
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
  }
};

bootstrap.config.less

Write less code. I. e. overwrite the default colors or sizes.

Example:

@font-size-base:          24px;

@btn-default-color:              #444;
@btn-default-bg:                 #eee;

extract-text-webpack-plugin

Configure style loader in bootstrap.config.js.

Example:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.

extract-text-webpack-plugin and postcss-loader

Configure style loader in bootstrap.config.js.

Example:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.

bootstrap-webpack's Issues

Config not producing correct styles

Hi there,
I've managed to get plugin working successfully and responding to changes in the config file but the styles are a bit off.

Here are some examples:

- note the space between the cells

- note the lack of space between the buttons

Most of it is fine though. I've compared against Bootstrap itself and the style seems fine, something else is throwing it off. If I just pull in the CSS from a CDN it all looks fine.

Here's my config:

var path    = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var DIST = path.resolve(__dirname, '../dist');
var APP  = path.resolve(__dirname, '../src/app');
var WEB  = path.resolve(__dirname, '../src/web');

module.exports = {
  entry: [
    'bootstrap-webpack!./config/bootstrap.config.js',
    path.resolve(APP, 'index.js')
  ],
  output: {
    path: DIST,
    filename: 'scripts/bundle.js'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: DIST
  },
  debug: true,
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        test: APP,
        exclude: /node_modules/,
        query: { presets: ['es2015', 'react'] }
      },
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      API_HOST: JSON.stringify((process.env.API_HOST ? process.env.API_HOST : 'http://localhost:8000'))
    }),
    new HtmlWebpackPlugin({
      title: 'Heading',
      hash: true,
      template: path.resolve(WEB, 'index.html'),
      inject: false
    })
  ],
  devtool: 'source-map'
};

I'm using [email protected].

Little help?

Typo in the font-loader example

bline#10 is still current. :)

Incomplete regexp for woff files in example

Seems like the example line does not work

  { test: /\.woff$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff" },

I stumbled on the same issue as : webpack-contrib/less-loader#44

This seems to work (at least it compiles)

 { test: /\.(woff|woff2)$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff" },

peerDependencies

How come url-loader and file-loader are peer dependencies? This plugin won't work without them, right? I had to install them manually in my project to get bootstrap-webpack to work.

webpack2 , upgrade extract-text-webpack-plugin error

my code:
var styleLoader = require('extract-text-webpack-plugin').extract(['css-loader', 'postcss-loader', 'less-loader']);
module.exports = {
styleLoader: styleLoader,
scripts: {
"alert" : true,
"button" : true,
"carousel" : true,
"dropdown" : true,
"modal" : true,
"tooltip" : true,
"popover" : true,
"tab" : true,
"affix" : true,
"collapse" : true,
"scrollspy" : true
},
styles: {
"mixins" : true,
"utilities": true,
"type" : true,
"normalize": true,
"forms" : true,
"grid": true,
"buttons" : true,
"responsive-utilities" : true,
"print" : true,
"code" : true,
"responsive-embed" : true,
"glyphicons" : true,
"images": true,
"modal" : true,
"print" : true,
"type" : true,
"code" : true,
"grid" : true,
"tables" : true,
"forms" : true,
"buttons" : true,
"responsive-utilities" : true,
"button-groups" : true,
"input-groups" : true,
"component-animations" : true,
"dropdowns" : true,
"tooltip" : true,
"popovers" : true,
"modals" : true,
"carousel" : true
}
};
ERROR in ./~/bootstrap-webpack/index.loader.js!./assets/app/common/bootstrap.config.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '/home/zhangfu/bitinvo_webpack/assets/app/common'

Include custom themes

How to include custom bootstrap theme?
I downloaded theme from https://bootswatch.com. It contains two files: bootswatch.less and variables.less.

I had placed its in app folder and imported from bootstrap.config.less

@import "./theme/lumen/variables";
@import "./theme/lumen/bootswatch";

Theme changed but it looks broken. Maybe bootswatch.less overrides bootstrap styles and should be imported last ?

There is my configuration: https://github.com/pochemuto/mortgage

Use resolve loader

Use { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },instead of require()

ReferenceError: jQuery is not defined

I am getting a jQuery is not defined error when trying to use the bootstrap-webpack plugin.

Here is my webpack.config.json

module.exports = {
    context: __dirname + "/src/",
    entry: "./jass.js",
    output: {
        path: __dirname + "/dist/",
        filename: "./bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.woff\d*$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.ttf$/,    loader: "file-loader" },
            { test: /\.eot$/,    loader: "file-loader" },
            { test: /\.svg$/,    loader: "file-loader" },
        ]
    },
};

And here is my entry script

require("jquery");
require("bootstrap-webpack");
require('./style.css');

I have tried multiple different proposed solutions on SO but nothing seems to work. It seems that the issue is specifically in the bootstrap transition package.

This is from my bundle.js script

/* 11 */
/***/ function(module, exports, __webpack_require__) {

    /* ========================================================================
     * Bootstrap: transition.js v3.3.2
     * http://getbootstrap.com/javascript/#transitions
     * ========================================================================
     * Copyright 2011-2015 Twitter, Inc.
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     * ======================================================================== */


    +function ($) {
      'use strict';

      // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
      // ============================================================

      function transitionEnd() {
        var el = document.createElement('bootstrap')

        var transEndEventNames = {
          WebkitTransition : 'webkitTransitionEnd',
          MozTransition    : 'transitionend',
          OTransition      : 'oTransitionEnd otransitionend',
          transition       : 'transitionend'
        }

        for (var name in transEndEventNames) {
          if (el.style[name] !== undefined) {
            return { end: transEndEventNames[name] }
          }
        }

        return false // explicit for ie8 (  ._.)
      }

      // http://blog.alexmaccaw.com/css-transitions
      $.fn.emulateTransitionEnd = function (duration) {
        var called = false
        var $el = this
        $(this).one('bsTransitionEnd', function () { called = true })
        var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
        setTimeout(callback, duration)
        return this
      }

      $(function () {
        $.support.transition = transitionEnd()

        if (!$.support.transition) return

        $.event.special.bsTransitionEnd = {
          bindType: $.support.transition.end,
          delegateType: $.support.transition.end,
          handle: function (e) {
            if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
          }
        }
      })
    }(jQuery);

Finally here is the output when I run webpack-dev-server

webpack-dev-server --watch --hot --content-base dist/
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /home/kyle/Dev/jass/dist
Hash: 6d41dd2df232826645f1
Version: webpack 1.5.3
Time: 2721ms
                                 Asset    Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot   20127          [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf   45404          [emitted]  
  89889688147bd7575d6327160d64e760.svg  108738          [emitted]  
448c34a56d699c29117adc64c43affeb.woff2   18028          [emitted]  
 fa2772327f55d8198301fdb8bcfc8158.woff   23424          [emitted]  
                           ./bundle.js  503429       0  [emitted]  main
chunk    {0} ./bundle.js (main) 471297 [rendered]
    [0] ./src/jass.js 72 {0} [built]
    [1] ./~/bootstrap-webpack/index.js 122 {0} [built]
    [2] ./src/style.css 950 {0} [built]
    [3] ./~/css-loader!./src/style.css 264 {0} [built]
    [4] ./~/jquery/dist/jquery.js 247387 {0} [built]
    [5] ./~/style-loader/addStyles.js 5507 {0} [built]
    [6] ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 392 {0} [built]
    [7] ./~/css-loader/cssToString.js 352 {0} [built]
    [8] ./~/bootstrap-webpack/~/style-loader!./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 630 {0} [built]
    [9] ./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 148336 {0} [built]
   [10] ./~/bootstrap-webpack/~/style-loader/addStyle.js 717 {0} [built]
   [11] ./~/bootstrap/js/transition.js 1831 {0} [built]
   [12] ./~/bootstrap/js/alert.js 2260 {0} [built]
   [13] ./~/bootstrap/js/button.js 3274 {0} [built]
   [14] ./~/bootstrap/js/carousel.js 7121 {0} [built]
   [15] ./~/bootstrap/js/collapse.js 5979 {0} [built]
   [16] ./~/bootstrap/js/dropdown.js 4696 {0} [built]
   [17] ./~/bootstrap/js/modal.js 9343 {0} [built]
   [18] ./~/bootstrap/js/tooltip.js 15103 {0} [built]
   [19] ./~/bootstrap/js/popover.js 3278 {0} [built]
   [20] ./~/bootstrap/js/scrollspy.js 4697 {0} [built]
   [21] ./~/bootstrap/js/tab.js 3789 {0} [built]
   [22] ./~/bootstrap/js/affix.js 4789 {0} [built]
   [91] ./~/bootstrap/fonts/glyphicons-halflings-regular.eot 81 {0} [built]
   [92] ./~/bootstrap/fonts/glyphicons-halflings-regular.ttf 81 {0} [built]
   [93] ./~/bootstrap/fonts/glyphicons-halflings-regular.svg 81 {0} [built]
   [94] ./~/bootstrap/fonts/glyphicons-halflings-regular.woff2 83 {0} [built]
   [95] ./~/bootstrap/fonts/glyphicons-halflings-regular.woff 82 {0} [built]

I am wondering if you have any tips on getting this figured out. Thanks for your time and thanks for developing/maintaining this package!

-Kyle

Advice on peerDependencies vs dependencies

I'm maintaining similar project: https://github.com/justin808/bootstrap-sass-loader

Wondering if other loaders should be peerDependencies or dependencies in package.json:

https://github.com/gowravshekar/bootstrap-webpack/blob/master/package.json#L18

  "dependencies": {
    "css-loader": "~0.6.3",
    "less-loader": "~0.6.2",
    "style-loader": "~0.6.0"
  },
  "peerDependencies": {
    "bootstrap": ">=3.0.2"
  }

cannot resolve path (or pattern) './src/**/*.spec.js'

How can i fixe this? Please help..

webpack4.x Webapck4 does not support 'extract-text-webpack-plugin'

webpack4.x Webapck4 does not support 'extract-text-webpack-plugin'
Is there a better solution?

expose vs providePlugin?

require('expose?$!expose?jQuery!jquery');

VS

plugins:[
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
]

Please link to my repo for boostrap-sass-loader

Would you mind linking to my repo in the readme. I've linked to yours for those looking for the less version. Thanks.

https://github.com/justin808/bootstrap-sass-loader

bootstrap.config.js doesn't work (in my config)

Hello,

first: Thanks for creating this library, it works like a charm.

I created a bootstrap.config.js in __dir/src/bootstrap/bootstrap.config.js with the example contents and updated my webpack.base.conf.js to the following:

module.exports = {
  entry: {
    app: [
      'bootstrap-webpack!./src/bootstrap/bootstrap.config.js',
      './src/main.js'
    ]
  },
  // ...
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ]
  }
}

When I build the app, I get the following error:

ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./src/bootstrap/bootstrap.config.js
Module build failed: Error: Cannot find module '/Users/arne/Developer/group/app/node_modules/eslint-loader/index.js!/Users/arne/Developer/group/app/src/bootstrap/bootstrap.config.js'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.module.exports.pitch (/Users/arne/Developer/group/app/node_modules/bootstrap-webpack/bootstrap-scripts.loader.js:20:16)
 @ ./~/bootstrap-webpack/index.loader.js!./src/bootstrap/bootstrap.config.js 2:0-225

So it seems he can't find eslint-loader or the bootstrap.config.js, but both files exist.
Plus when I get syntax errors on the file (when I remove the =, i get Unexpected token {).

I also tried prepending !, !! and -! but with not effects.

Any idea how to handle this? Thanks in advance! 👍

Update to webpack 2

https://webpack.js.org/guides/migrating/

Cannot find module

ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module build failed: Error: Cannot find module '/Users/aroche/Code/other/aussie-schools/node_modules/babel-loader/index.js!/Users/aroche/Code/other/aussie-schools/node_modules/bootstrap-webpack/bootstrap.config.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.module.exports.pitch (/Users/aroche/Code/other/aussie-schools/node_modules/bootstrap-webpack/bootstrap-scripts.loader.js:20:16)
 @ ./~/bootstrap-webpack/index.js 4:0-52

Any clues? Here's my package.json:

{
  "name": "table",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack -p --progress",
    "watch": "./node_modules/.bin/webpack -p --watch --progress",
    "watch-dev": "./node_modules/.bin/webpack --watch --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^4.7.16",
    "babel-core": "^4.7.16",
    "babel-loader": "^4.2.0",
    "bootstrap": "^3.3.4",
    "bootstrap-webpack": "0.0.3",
    "css-loader": "^0.10.1",
    "event-emitter": "^0.3.3",
    "file-loader": "^0.8.1",
    "fixed-data-table": "^0.1.2",
    "flux": "^2.0.1",
    "lodash": "^3.6.0",
    "papaparse": "git://github.com/mholt/PapaParse.git#master",
    "react": "^0.13.1",
    "style-loader": "^0.10.1",
    "url-loader": "^0.5.5",
    "webpack": "^1.8.4"
  }
}

Font files are generated into wrong folder

When I compile my project, I get errors:

jquery.js:9077 GET file:///Users/and/devel/webpack_bootstrap/448c34a56d699c29117adc64c43affeb.woff2 net::ERR_FILE_NOT_FOUND
GET file:///Users/and/devel/webpack_bootstrap/fa2772327f55d8198301fdb8bcfc8158.woff net::ERR_FILE_NOT_FOUND
GET file:///Users/and/devel/webpack_bootstrap/e18bbf611f2a2e43afc071aa2f4e1512.ttf net::ERR_FILE_NOT_FOUND

Root folder of project is /Users/and/devel/webpack_bootstrap/

Files

448c34a56d699c29117adc64c43affeb.woff2
fa2772327f55d8198301fdb8bcfc8158.woff
e18bbf611f2a2e43afc071aa2f4e1512.ttf

are generated into /Users/and/devel/webpack_bootstrap/dist folder after compilation.

package.json

{
  "name": "Webpack_bootstrap",
  "version": "1.0.0",
  "description": "webpack bootstrap test",
  "main": "index.js",
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-select": "^1.9.3",
    "bootstrap-table": "^1.9.1",
    "bootstrap-webpack": "0.0.5",
    "bower-webpack-plugin": "^0.1.9",
    "css-loader": "^0.23.0",
    "eonasdan-bootstrap-datetimepicker": "^4.15.35",
    "events": "^1.1.0",
    "exports-loader": "^0.6.2",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "http-server": "^0.8.5",
    "jquery": "^2.1.4",
    "jquery-resizable-columns": "^0.2.3",
    "jquery-slimscroll": "^1.3.6",
    "jquery-ui": "^1.10.5",
    "less": "^2.5.3",
    "less-loader": "^2.2.2",
    "lodash": "^3.10.1",
    "moment": "^2.10.6",
    "node-sass": "^3.4.2",
    "object-assign": "^4.0.1",
    "path": "^0.12.7",
    "sass-loader": "^3.1.2",
    "select2": "^4.0.1",
    "select2-bootstrap-css": "^1.4.6",
    "style-loader": "^0.13.0",
    "svg-sprite-loader": "0.0.15",
    "typeahead.js": "^0.11.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }
}

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var BowerWebpackPlugin = require("bower-webpack-plugin");
var path = require('path');

module.exports = {
    cache: true,
    entry: {
      index: './src/script/index.js'
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
        sourceMapFilename: "[file].map"
    },
    debug: true,
    devtool: 'source-map',
    module: {
      loaders: [
      // **IMPORTANT** This is needed so that each bootstrap js file required by
      // bootstrap-webpack has access to the jQuery object
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },

      // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
      // loads bootstrap's css.
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      },
      {
        test: /\.less$/,
        loaders: [ 'style', 'css', 'less' ]
      },
      {
        test: /\.css$/,
        loaders: [ 'style', 'css']
      },
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
    },
    plugins: [
        new BowerWebpackPlugin(),
        new CommonsChunkPlugin('index', 'index.js', Infinity)
    ],
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Won</title>
</head>
<body>

    <script type="text/javascript" src="./dist/index.js"></script>

    <div id="content">

      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              <button type="button" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
              </button>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

</body>
</html>

src -> script -> index.js

var bootstrap = require('bootstrap-webpack');

Declare missing loader dependencies

bline#6 is still needed to pull in some of the loaders used by bootstrap-webpack.

extract-text-webpack-plugin loader usage without plugin error

Hi,

I have configured bootstrap.config.js like so:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  scripts: {
...
  },
  styles: {
...
  }
};

and my main webpack.config.js:

var webpack = require('webpack');
var path = require('path');

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

module.exports = [
  // Client build
  {
...
  },

  // Server build
  {
    plugins: [
      new ExtractTextPlugin("styles.css")
    ],
    entry: ['bootstrap-webpack!./bootstrap.config.js','./server/server.jsx'],
    target: 'node',
    node: {
      console: false,
      global: false,
      process: false,
      Buffer: false,
      __filename: false,
      __dirname: false,
    },
    output: {
      path: './dist',
      filename: 'server.js',
    },
    module: {
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['react', 'es2015', 'stage-0']
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['es2015', 'stage-0']
          }
        },
        {
          test: /\.json$/,
          loader: 'json-loader'
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("css-loader")
        },
        {
          test: /\.png$/,
          loader: "url-loader?limit=100000"
        },

        // Bootstrap
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/font-woff'},
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/octet-stream'
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file'
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=image/svg+xml'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    }
  }
];

This actually works fine and the outputted styles.css file includes my own CSS, plus the bootstrap CSS. However, there is an error thrown during compilation:

    ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./bootstrap.config.js
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.module.exports.pitch (/Users/dpwrussell/Checkout/ExampleApp/node_modules/extract-text-webpack-plugin/loader.js:21:9)
     @ ./~/bootstrap-webpack/index.loader.js!./bootstrap.config.js 1:0-400

I recomed integrating with and syncing bs version to: https://github.com/valor-software/ng2-bootstrap

this is a great project and so I recommend integrating with and syncing bs version to: https://github.com/valor-software/ng2-bootstrap

Regards,

Sean

Checkout the Ultimate Angular 2 Boorstrap App: @ http://ng2.javascriptninja.io
Source@ https://github.com/born2net/ng2Boilerplate

Handle Bootstrap's jQuery dependency

Straight up with a require("bootstrap-webpack"); my browser says "ReferenceError: jQuery is not defined" with most of Bootstrap's script modules.

I've added jquery as a dependency in package.json and this in webpack.config.js to fix it:

module: {
    loaders: [
        {
            test: /\/bootstrap\/js\//,
            loader: "imports?jQuery=jquery"
        },
}

Unmet dependencies ..

When I have installed bootstrap-webpack, I got following unmet dependencies:

npm WARN [email protected] requires a peer of less@^2.3.1 but none was installed.
npm WARN [email protected] requires a peer of url-loader@>=0.5.5 but none was installed.
npm WARN [email protected] requires a peer of file-loader@>=0.8.1 but none was installed.
npm WARN [email protected] requires a peer of exports-loader@>=0.6.2 but none was installed.
npm WARN [email protected] requires a peer of extract-text-webpack-plugin@>=0.3.8 but none was installed.

Any idea, what can I do with this?

Thx.

support latest 3.x

Trying to import the responsive-embed less styles (available since 3.1.0), I noticed it's not listed to the bootstrap-styles.loader.js.

Any chance it could be added?

Windows support?

Are you supporting windows?

I got this issue: shakacode/bootstrap-sass-loader#14 regarding windows support.

Webpack 2 - Cannot find module \babel-loader\lib\index.js??ref--8-0

Hi,

I've started my project with an old version of packages and npm etc, now I'm trying to update everything and got stuck in the process. when running npm start i'm getting the following error:

Module build failed: Error: Cannot find module 'C:\Projetos\tiger_team_webpack2\static\node_modules\babel-loader\lib\index.js??ref--8-0!C:\Projetos\tiger_team_webpack2\static\node_modules\bootstrap-webpack\bootstrap.config.js'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.module.exports.pitch (C:\Projetos\tiger_team_webpack2\static\node_modules\bootstrap-webpack\bootstrap-scripts.loader.js:20:16)
 @ ./node_modules/bootstrap-webpack/index.js 2:0-59
 @ ./src/index.js
 @ multi bootstrap-loader webpack-hot-middleware/client ./src/index ./src 

To help here is my bootstrap.config.js. Ps: I'm using them in separate configuration files

commom.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');

const development = require('./dev.config');
const production = require('./prod.config');

require('babel-polyfill').default;

const TARGET = process.env.npm_lifecycle_event;

const PATHS = {
    app: path.join(__dirname, '../src'),
    build: path.join(__dirname, '../dist'),
};

process.env.BABEL_ENV = TARGET;

const common = {
    entry: [
        PATHS.app,
    ],

    output: {
        path: PATHS.build,
        filename: 'bundle.js',
    },

    resolve: {
        extensions: ['', '.jsx', '.js', '.json', '.scss'],
        modulesDirectories: ['node_modules', PATHS.app],
    },

    module: {
        loaders: [{
            test: /bootstrap-sass\/assets\/javascripts\//,
            loader: 'imports?jQuery=jquery',
        }, {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-woff',
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-woff2',
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/octet-stream',
        }, {
            test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-otf',
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'file',
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=image/svg+xml',
        }, {
            test: /\.js$/,
            loaders: ['babel-loader'],
            exclude: [/node_modules/,
                'C:/Projetos/tiger_team_webpack2/static/node_modules/bootstrap']
        }, {
            test: /\.png$/,
            loader: 'file?name=[name].[ext]',
        }, {
            test: /\.jpg$/,
            loader: 'file?name=[name].[ext]',
        }],
    },

    postcss: (webpack) => (
        [
            autoprefixer({
                browsers: ['last 2 versions'],
            })
        ]
    ),
};

if (TARGET === 'start' || !TARGET) {
    module.exports = merge(development, common);
}

if (TARGET === 'build' || !TARGET) {
    module.exports = merge(production, common);
}

dev.config.js

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

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'bootstrap-loader',
        'webpack-hot-middleware/client',
        './src/index',
    ],
    output: {
        publicPath: '/dist/',
    },

    module: {
        loaders: [{
            test: /\.scss$/,
            loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
        },
        {
            test: /\.json$/,
            loader: 'json-loader',
        }],
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"development"',
            },
            __DEVELOPMENT__: true,
        }),
        new ExtractTextPlugin('bundle.css'),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
        }),
    ],
};

prod.config.js

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

module.exports = {
    devtool: 'source-map',

    entry: ['bootstrap-loader/extractStyles'],

    output: {
        publicPath: 'dist/',
    },

    module: {
        loaders: [{
            test: /\.scss$/,
            loader: 'style!css!postcss-loader!sass',
        },
        {
            test: /\.json$/,
            loader: 'json-loader',
        }],
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"',
            },
            __DEVELOPMENT__: false,
        }),
        new ExtractTextPlugin('bundle.css'),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
        }),
    ],
};

I'm really stuck, any help would be great.
If any file is necessary just ask.
Tanks

Give example for using it in a global namespace

Just give a code snippet of you using require() in the global namespace to avoid confusion.

Confusing to use with other 'heavy' (transpiling) loaders

Thanks for trying to tame bootstrap's complexity!

As noted in #3, it is challenging to use this with other loaders including Babel, JSX.

1. At the very least some README points about this would help.
2. I also don't really understand why this is an issue :) With other loaders, I can add them to the 'loaders' section, and add a test.

For us newbies, where do I put require("bootstrap-webpack");

In the readme, can someone please take 10 secs to tell us where this line goes. If I knew, I'd do it myself! Thanks.

Cannot find module 'style!css!less!./bootstrap-styles!./bootstrap.config.js'

First things first. I am new to webpack, so the origin of this issue might have something to do with the overall setup, but I am not sure about it so I post this issue here, since the error first occured after I tried to install and make use of bootstrap-webpack.

when compiling I get the following error:

Cannot find module 'style!css!less!./bootstrap-styles!./bootstrap.config.js'

this is my webpack.config.js:

'use strict';

const webpack = require( 'webpack' );
const bootstrap = require( 'bootstrap-webpack' );
const path = require( 'path' );
let devHost = 'http://81.14.233.246:8888';
let devPath = '/_clients/marcopolo/mopvmnews/public';

const fs = require('fs');
if (fs.existsSync('./webpack.vars.local.js')) {
    const webpackConfigLocal = require( './webpack.vars.local.js' );
    devHost = webpackConfigLocal.devHost;
    devPath = webpackConfigLocal.devPath;
}

module.exports = {
    devHost,
    devPath,
    debug: true,
    devtool: '#eval-source-map',
    context: path.join( __dirname, 'src', 'jsx' ),

    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ['src/jsx', 'node_modules'],
    },

    entry: [
        'bootstrap-webpack!./bootstrap.config.js',
        'webpack/hot/dev-server',
        'webpack-hot-middleware/client',
        './index'
    ],

    output: {
        path: path.join( __dirname, 'public', 'assets', 'js' ),
        publicPath: `${devPath}/assets/js/`,
        filename: 'bundle.js'
    },

    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],

    module: {
        loaders: [
            {
                test: /\.(woff|woff2)$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf$/,
                loader: 'file-loader'
            },
            {
                test: /\.eot$/,
                loader: 'file-loader'
            },
            {
                test: /\.svg$/,
                loader: 'file-loader'
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: [ 'react-hot', 'babel' ]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            }
        ],
        preLoaders: [
            {
                test: /\.jsx$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },

    // REPORT ONLY ERRORS
    eslint: {
        quiet: true
    }
};

Any ideas?

Can I move bootstrap to a "dll" bundle with bootstrap-webpack and DllPlugin？

I found that my webpack building slow down when I using bootstrap-webpack to build bootstrap. I consider if I can build bootstrap inside a "dll" bundle with bootstrap-webpack and DllPlugin, because it will save a lot of time from webpack building.

Have anybody tried this idea? Plz let me know, thanks.

Can I move bootstrap to a "dll" bundle with bootstrap-webpack and DllPlugin?

I found that my webpack building slow down when I using bootstrap-webpack to build bootstrap. I consider if I can build bootstrap inside a "dll" bundle with bootstrap-webpack and DllPlugin, because it will save a lot of time from webpack building.

Have anybody tried this idea? Plz let me know, thanks.

Import order not allowing overrides

I'm trying to override the .has-error .form-control in bootstrap/less/forms.less.

my_styles/theme/_forms.less:

.has-error {
  .form-control-validation(...);
}

But it seems that the bootstrap-webpack is importing my style first and then importing the bootstrap styles. The generated css looks like:

// my style
.has-error .form-control {...}
...
// bootstrap style
.has-error .form-control {...}

Indeed, you are importing the bootstrap.config.less first.

Support for ExtractTextPlugin

Any advice how to extract CSS required by this loader?

Webpack 2 error: Can't resolve './bootstrap-styles' & './bootstrap-scripts'

Is this supposed to be compatible with Webpack 2? I am getting following error when building my app:

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-styles' in '/Users/leefsmp/Desktop/forge-react-template/node_modules/bootstrap-webpack'
 @ ./~/bootstrap-webpack/index.js 1:0-66
 @ ./src/client/index.js
 @ multi webpack-hot-middleware/client ./src/client/index.js

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-scripts' in '/Users/leefsmp/Desktop/forge-react-template/node_modules/bootstrap-webpack'
 @ ./~/bootstrap-webpack/index.js 2:0-52
 @ ./src/client/index.js
 @ multi webpack-hot-middleware/client ./src/client/index.js

Thanks for any hint how this should be fixed ...

webpack unable to find module

I'm trying to use the default configuration, but i'm getting this weird error
Error: Cannot find module 'client/node_modules/bootstrap-webpack/index.loader.js'
the file exists there, do you have any suggestions?