There are - like always with computer science - multiple ways to integrate Bootstrap in your project.
The easiest one probably being by referencing both needed resources:
<link rel="stylesheet"
href="//your.favourite.cdn/bootstrap.css"
integrity="sha384-XXXXXXXX"
crossorigin="anonymous">
<script src="//your.favourite.cdn/bootstrap.js"
integrity="sha384-XXXXXXXX"
crossorigin="anonymous">< /script>
Done. You get Bootstrap in its full glory with the benefits that serving resources via a CDN can offer.
However, this is not always what you're looking for.
In this guide, we will look at how to integrate (and customise) Bootstrap in Este's Webpack bundle.
The job is handed off to bootstrap-loader
. The required steps are excerpted from the readme file. To sum it up here:
npm install bootstrap-loader resolve-url-loader --save
# Either Bootstrap 3...
npm install bootstrap-sass --save
# or Bootstrap 4
npm install twbs/bootstrap#v4.0.0-alpha.2 --save
# Other loaders are already configured in our Este's project, w00t!
Now we need to tell Webpack to include bootstrap-loader
in the build process. Edit webpack/makeConfig.js
:
Note how we do it before
browser/main.js
const config = {
...
entry: {
app: isDevelopment ? [
`webpack-hot-middleware/client?path=http://${serverIp}:${constants.HOT_RELOAD_PORT}/__webpack_hmr`,
'bootstrap-loader',
path.join(constants.SRC_DIR, 'browser/main.js')
] : [
'bootstrap-loader',
path.join(constants.SRC_DIR, 'browser/main.js')
]
},
...
}
Further configuration is optional if you will stay with version 3 of Bootstrap. However, it is recommended (and required for Bootstrap 4) by the bootstrap loader package authors.
Create a .bootstraprc
file at the root directory. The file can be written in YAML or JSON format. Feel free to modify it as you need.
All file options are described here.
You will probably need to remove the npm package normalize.css
and the line importing it in browser/app/App.styl
if you keep normalize
to true
in .bootstraprc
.
Depending on what configuration you set, you may need to include jQuery.
If you need to make use of Bootstrap own files (like variables or mixins), simply import the resources from your own SCSS file.
Pay attention to the leading tilde (~) which allow us to resolve files from our beloved
node_modules
directory.
@import "~bootstrap/scss/_mixins.scss";
@import "~bootstrap/scss/_variables.scss";