- Install
npm --save install bootstrap
- Create directory
src/bootstrap
- Copy file from
node_modules/bootstrap/less/bootstrap.less
tosrc/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.js
to 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