bootstrap-loader

4.0.5 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader to bundle Bootstrap 3 & 4 styles (Sass) and scripts. Version 4.0.5, last updated 2018; low maintenance. Supports Bootstrap 4 with customizations via .bootstraprc. Differentiators: inline SVG/PNG glyphicons, Tether integration, PostCSS config. Full peer dependencies required: css-loader, sass-loader, mini-css-extract-plugin, webpack >=5.0.

Common errors

error Module not found: Error: Can't resolve 'bootstrap-loader' ↓

cause Missing dependency on bootstrap-loader or incorrect webpack config.

fix

npm install bootstrap-loader --save-dev and ensure it's listed in webpack entry or imported.

error Cannot find module 'mini-css-extract-plugin' ↓

cause Required peer dependency not installed.

fix

npm install mini-css-extract-plugin --save-dev (for webpack 5).

error SassError: Undefined variable: "$icon-font-path" ↓

cause Bootstrap's glyphicon paths not configured.

fix

Set $icon-font-path in your .bootstraprc pre-customizations or import Bootstrap variables before glyphicons.

Warnings

breaking Bootstrap 4 requires Bootstrap 4's JavaScript dependencies (jQuery, Popper.js) to be separately loaded. bootstrap-loader does not bundle jQuery. ↓

fix Add ProvidePlugin for jQuery and Popper.js, or use Bootstrap 4 JS via another method.

breaking Webpack versions: v4 requires webpack >=5.0. Older versions (v1–v3) used different loaders/config. ↓

fix Upgrade webpack to >=5.0.0, or pin bootstrap-loader@3.x for webpack v4.

breaking mini-css-extract-plugin peer dependency requires webpack 5; for webpack 4 use extract-text-webpack-plugin with bootstrap-loader v3. ↓

fix Use webpack >=5 or downgrade to bootstrap-loader@3.x with proper extract-text-webpack-plugin version.

deprecated bootstrap-loader v4 is no longer actively maintained. Upstream Bootstrap itself moved to Bootstrap 5 with separate JS modules. ↓

fix Consider migrating to direct Bootstrap imports or a modern alternative like bootstrap (official npm package) with webpack.

gotcha If using Bootstrap 4 glyphicons, bootstrap-loader expects to resolve SVG/PNG files; missing loaders cause 'Module not found' errors. ↓

fix Add file-loader or url-loader for fonts/images, and set proper paths in .bootstraprc.

Install

npm install bootstrap-loader

yarn add bootstrap-loader

pnpm add bootstrap-loader

Imports

bootstrap-loader
wrong
```
const bootstrap = require('bootstrap-loader')
```
correct
```
import 'bootstrap-loader'
```
Side-effect only loader, no exports. Use import or require for side effects.

bootstrap-loader/lib/loader

wrong

import { something } from 'bootstrap-loader/lib/loader'

correct

import 'bootstrap-loader/lib/loader'

Internal path may break; prefer the main entry.

bootstrap-loader/no-op
```
import 'bootstrap-loader/no-op'
```
Stub for SSR or tests where Bootstrap is not needed.

Quickstart

Minimal webpack config to load Bootstrap via bootstrap-loader and separate custom SCSS.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /bootstrap-loader[\\\/]lib[\\\/]bootstrap-sass$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /bootstrap-loader[\\\/]lib[\\\/]bootstrap-sass$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

// src/index.js
import 'bootstrap-loader';
import './styles/main.scss';