How to Bundle Bootstrap-Icons That Have Sass and Font Resources With…

Dimas Maulana Development

09-01-2022

To bundle Bootstrap Icons that have Sass and font resources with Webpack in production mode, you’ll need to make a few modifications to your Webpack configuration. Here’s a step-by-step guide on how to achieve this:

Install Dependencies:

First, make sure you have the necessary dependencies installed. You’ll need sass-loader, css-loader, style-loader, postcss-loader, and resolve-url-loader to handle Sass and CSS files. You may also need the file-loader or url-loader for fonts and other assets.

You can install these dependencies using npm or yarn:
1

npm install sass-loader css-loader style-loader postcss-loader resolve-url-loader file-loader --save-dev

Configure Webpack:

Update your Webpack configuration to include the necessary loaders and plugins for processing Sass and font resources. Here’s an updated webpack.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './web/src/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'web', 'static', 'assets', 'js'),
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader, // Extract CSS to a separate file
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true, // Enable source maps for debugging
            },
          },
        ],
      },
      {
        test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '../fonts/', // Adjust the output path as needed
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './web/src/index.html', // Provide your HTML template file
    }),
    new MiniCssExtractPlugin({
      filename: '../css/styles.css', // Output path for CSS
    }),
  ],
};

In this configuration:

We’ve added the MiniCssExtractPlugin to extract the CSS into a separate file, which is a best practice for production builds.
The file-loader is configured to handle font files and place them in the desired output path.
The postcss-loader is used with autoprefixer to add necessary vendor prefixes to your CSS.
Make sure to adjust the paths and filenames as needed to match your project structure.

Install Additional Plugins:

You’ll need to install the html-webpack-plugin and mini-css-extract-plugin if you haven’t already:
1

npm install html-webpack-plugin mini-css-extract-plugin --save-dev

Update HTML File:

Ensure that your HTML file (specified in the HtmlWebpackPlugin) includes the CSS and JavaScript files correctly. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App</title>
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <!-- Your HTML content here -->
  <script src="bundle.js"></script>
</body>
</html>

Build Your Project:

Now, you can build your project in production mode:
1

webpack --mode production
This will generate a production-ready bundle with your Sass styles, fonts, and Bootstrap Icons properly bundled and optimized.

Ensure that you’ve properly configured the paths and filenames according to your project structure, and your Bootstrap Icons should be bundled successfully with Webpack in production mode.