bootstrap-loader

[Quayle57]

Hello, I'm trying to use bootstrap-loader and bootstrap4 alpha 6 in this project I succeed to make a bundle out of it, but it stays in a js file and the css is not load from there.

First I installed all the packages ;

npm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader
npm install bootstrap-loader --save-dev
npm install jquery --save
npm install bootstrap@4.0.0-alpha.6 --save

then I added the loader here:

config.entry = {
  'polyfills': './src/polyfills.ts',
  'vendor': './src/vendor.ts',
  'bootstrap': 'bootstrap-loader',
  'app': './src/main.ts'  // main app
};

then I configured the plugin:

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

new ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery",
  Tether: "tether",
  "window.Tether": "tether",
  Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
  Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
  Button: "exports-loader?Button!bootstrap/js/dist/button",
  Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
  Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
  Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
  Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
  Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
  Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
  Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
  Util: "exports-loader?Util!bootstrap/js/dist/util"
})

and finally I updated the loader:

{
  test: /bootstrap\/dist\/js\/umd\//,
  use: 'imports-loader?jQuery=jquery'
},

I have no error, the bundle is with vendor, polyfills and main but the CSS is not taken into account. Has someone any idea what did I do wrong ?

[Foxandxss]

Urg, why use raw bootstrap when you have ng-bootstrap ? Way way better than that.

The entry you have, you are using the loader in there, you can't do that.

[Quayle57]

https://github.com/shakacode/bootstrap-loader

# Usage

## Simply require it:

require('bootstrap-loader');

## Or add bootstrap-loader as a module in an entry point in your webpack config (you'll need Webpack 2.1 beta and higher):

entry: [ 'bootstrap-loader', './app' ]

That's why I used it in the entry,

I don't know about ng-bootstrap, I will check it, but right now bootstrap-loader is more than enough for my needs

[Foxandxss]

Weird that one. Never used it so I have no idea and right now no time to try myself.

[Quayle57]

The name is disturbing because it loads bootstrap, but it is not a Webpack loader.

Thank you anyway I will check ng-bootstrap anyway, but if someone find a solution to my probelm feel welcome to answer !

[mcescalante]

What do you need bootstrap-loader for? I am using vanilla Bootstrap 4 in my application fine without using bootstrap-loader and it's one less dependency :) If you need instructions for getting bootstrap (or ng-bootstrap, which I also use) added I can post those, but I have no experience specifically with bootstrap-loader

[Quayle57]

bootstrap-loaderis useful for customizing and making a bootstrap bundle that fits exactly your needs, plus the fact that you can add the CSS prefixes for the navigators you want.

For now I added bootstrap in the vendor.ts like that:

import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';

But I don't know if it's the good way, I'm interested in the way you installed it but I still wish that someone could help me with bootstrap-loader

[strictd]

Depending on what i'm trying to accomplish. I either use https://www.npmjs.com/package/bootstrap-css-only .. importing into the vendor.ts file.

if I need more of the bootstrap utilities, I use https://www.npmjs.com/package/ngx-bootstrap

[Quayle57]

Okay I found my problem and it was in the conf of bootstrap-loader

---
# Output debugging info
# loglevel: debug

# Major version of Bootstrap: 3 or 4
bootstrapVersion: 4

# If Bootstrap version 4 is used - turn on/off flexbox model
useFlexbox: true

# Webpack loaders, order matters
styleLoaders:
  - style-loader
  - css-loader
  - postcss-loader
  - sass-loader

I needed to put style-loader as first loader here, thank you for your help !