Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bootstrap-webpack

Package Overview
Dependencies
Maintainers
2
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootstrap-webpack

bootstrap3 package for webpack

  • 0.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

bootstrap-webpack

bootstrap package for webpack.

This is the less version. If you are looking for the sass version, refer to bootstrap-sass-loader.

Usage

Bootstrap use some fonts. You need to configure the correct loaders in your webpack.config.js. Example:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  }
};

Bootstrap javascript components depends on jQuery. This uses imports-loader of webpack. Install imports-loader by npm install imports-loader --save-dev.

Complete Bootstrap

To use the complete bootstrap package including styles and scripts with the default settings:

require("bootstrap-webpack");

Custom configuration

You can configurate bootstrap-webpack with two configuration files:

  • bootstrap.config.js
  • bootstrap.config.less

Add both files next to each other to your project. And:

require("bootstrap-webpack!./bootstrap.config.js");

Or simple add it as entry point to your webpack.config.js:

module.exports = {
  entry: [
    "bootstrap-webpack!./bootstrap.config.js",
    "your-existing-entry-point"
  ]
};

Using with other js loaders.

If you are using other loaders for all js files(test: /\.js$/), this might interfere with bootstrap-webpack. You can override the configuration loader order in the module request to suit special cases.

  • adding ! to a request will disable configured preLoaders
require("!bootstrap-webpack!./bootstrap.config.js")
  • adding !! to a request will disable all loaders specified in the configuration
require("!!bootstrap-webpack!./bootstrap.config.js")
  • adding -! to a request will disable configured preLoaders and loaders but not the postLoaders
require("-!bootstrap-webpack!./bootstrap.config.js")

Check details in webpack loader order

You can also change your configuration, so that other loaders are not applied to bootstrap.

  1. Use exclude option of the module.loaders section of the config.
  2. Adjust the regex in test option of the module loaders to prevent matching all the js files to which the loaders are applied.

See the explanation of different module options under module.loaders

bootstrap.config.js

Example:

module.exports = {
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
  }
};
bootstrap.config.less

Write less code. I. e. overwrite the default colors or sizes.

Example:

@font-size-base:          24px;

@btn-default-color:              #444;
@btn-default-bg:                 #eee;

extract-text-webpack-plugin

Configure style loader in bootstrap.config.js.

Example:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.

extract-text-webpack-plugin and postcss-loader

Configure style loader in bootstrap.config.js.

Example:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.

Keywords

FAQs

Package last updated on 04 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc