- Install
npm --save install bootstrap - Create directory
src/bootstrap - Copy file from
node_modules/bootstrap/less/bootstrap.lesstosrc/bootstrap/bootstrap.less - Fix import to begin with
@import "~bootstrap/less/...";. - Add theme import
@import "~bootstrap/less/theme.less";. - Add overrides, for example
@import "variables.less";and redefine@brand-primary. - Create file
src/bootstrap/bootstrap.js. Please refer tonode_modules/bootstrap/dist/js/npm.jsto find out what js modules could be used and in what order. - Test with html:
<button class="btn btn-primary">Test Button</button>. - Import
import './bootstrap/bootstrap';andimport './bootstrap/bootstrap.less';to load library somewhere in main entry file. - Fix webpack.config.js to define jQuery as global variable.
Example src/bootstrap/bootstrap.js:
import 'bootstrap/js/transition';
import 'bootstrap/js/alert';
import 'bootstrap/js/button';
import 'bootstrap/js/carousel';
import 'bootstrap/js/collapse';
import 'bootstrap/js/dropdown';
import 'bootstrap/js/modal';
import 'bootstrap/js/tooltip';
import 'bootstrap/js/popover';
import 'bootstrap/js/scrollspy';
import 'bootstrap/js/tab';
import 'bootstrap/js/affix';
src/bootstrap/bootstrap.js could be used to remove js components from library.
src/bootstrap/bootstrap.less could be used to remove css components from library.
src/bootstrap/*.less could be used to alter variables, mixins or components.
Example of webpack.config.js:
module.exports = {
...
plugins: [
...
new webpack.ProvidePlugin({
jQuery: 'jquery', // bootstrap 3.x requires
})
...
]
...
}
Thanks Artem. Finally something useful. I been looking all over internet trying to make my overridden bootstrap (less) to work with webpack. Your blog made me realize that the bootstrap.less in node_modules was causing all my file errors