Webpack 5 and bootstrap-icons sass is not loading web fonts

  bootstrap-5, javascript, webfonts, webpack, webpack-5

I’m using webpack 5 the latest version of webpack I install all the requirements and configured well the problem that I have is the sass not loading the Web Fonts file.

I’m trying to import the bootstrap-icons package in my app.scss file but unfortunately it shows me some errors while I run npm run build command.

I think the problem is coming from fonts loading!!

enter image description here

here is my webpack.config.js

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

module.exports = {
    mode: process.env.NODE_ENV,
    entry: {
        app: [path.resolve(__dirname, "src/js/app.js"), path.resolve(__dirname, "src/scss/app.scss")],
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].bundle.js",
        assetModuleFilename: "images/[hash][ext][query]",
        clean: true,
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port: 3000,
        open: true,
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: ["@babel/plugin-proposal-class-properties"],
                        cacheDirectory: true,
                    },
                },
            },
            {
                test: /.s[ac]ss$/i,
                use: [
                    process.env.NODE_ENV !== "production" ? "style-loader" : MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            implementation: require("postcss"),
                            sourceMap: true,
                            postcssOptions: {
                                plugins: [["postcss-preset-env", { browsers: "last 2 versions" }]],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass"),
                            sourceMap: true,
                            sassOptions: {
                                fiber: require("fibers"),
                                outputStyle: "compressed",
                            },
                        },
                    },
                ],
            },
            {
                test: /.(ico|png|svg|jpg|jpeg|gif|svg|webp|tiff)$/i,
                type: "asset/resource",
                generator: {
                    filename: "images/[name].[hash][ext]",
                },
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html"),
            inject: "body",
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].bundle.css",
            chunkFilename: "css/[id].bundle.css",
        }),
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
    experiments: {
        asset: true,
    },
};

Source: Ask Javascript Questions

One Reply to “Webpack 5 and bootstrap-icons sass is not loading web fonts”

LEAVE A COMMENT