Webpack

Learn how to include Boosted in your project using Webpack.

Installing Boosted

Install boosted as a Node.js module using npm.

Importing JavaScript

Import Boosted’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js):

import 'boosted';

Alternatively, you may import plugins individually as needed:

import 'boosted/js/dist/util';
import 'boosted/js/dist/alert';
...

Boosted is dependent on jQuery and Popper, these are defined as peerDependencies, this means that you will have to make sure to add both of them to your package.json using npm install --save jquery popper.js.

Importing Styles

Importing Precompiled Sass

To enjoy the full potential of Boosted and customize it to your needs, use the source files as a part of your project’s bundling process.

First, create your own _custom.scss and use it to override the built-in custom variables. Then, use your main Sass file to import your custom variables, followed by Boosted:

@import "custom";
@import "~boosted/scss/boosted";

For Boosted to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

Importing Compiled CSS

Alternatively, you may use Boosted’s ready-to-use CSS by simply adding this line to your project’s entry point:

import 'boosted/dist/css/boosted.min.css';

In this case you may use your existing rule for css without any special modifications to webpack config, except you don’t need sass-loader just style-loader and css-loader.

...
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
...