Multiple stylesheet does not working with Webpack …

Swiper bundler CSS has a base64 font-face, When I was trying to load it into my index.ts (main entry) file it gives me the following error. I was tried a lot of loaders (url-loader, base64-font-loader, etc) for this but none of these were worked for me. How can I fix this problem? Which loader should I use to fix this problem?

index.ts

import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/swiper-bundle.css'; //swiper stylesheet
import './index.scss'; //other stylesheet

//...other stuff

error:

ERROR in ./node_modules/swiper/swiper-bundle.css 13:0
Module parse failed: Unexpected character '@' (13:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> @font-face {
|   font-family: 'swiper-icons';
|   src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
 @ ./src/index.ts 43:0-35

webpack 5.11.0 compiled with 1 error in 9441 ms
[webpack-cli] watching files for updates...

webpack.config.js:

/**
 * 
 * WebPack Configuration --
 */

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

module.exports = {
    watch: true,
    devtool: 'source-map',
    mode: 'development',

    entry: {
        bundle: path.resolve(__dirname, './src/index.ts')
    
    },
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'static/scripts/[name].js',
        publicPath: "./"
    },

    resolve: {
        extensions: [
            '.ts', '.js', '.scss', '.sass', '.css'
        ]
    },

    module: {
        rules: [
            /**
             * 
             * TypeScript + JavaScript
             */
            {
              test: /.m?(js|ts)$/gi,
              exclude: /node_modules/,
              use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },

                'ts-loader'
              ]
            },

            /**
             * 
             * SCSS + SASS + CSS
             */

            {
                test: /.s?(css|ass)$/gi,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                      
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "autoprefixer"
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ]
            },

            /**
             * 
             * HTML + TEMPLATE
             */
            {
                test: /.html$/i,
                loader: 'html-loader',
                options: {
                  attributes: {
                    list: [
                      {
                        tag: 'img',
                        attribute: 'data-src',
                        type: 'src',
                      },
                      {
                        tag: 'img',
                        attribute: 'data-srcset',
                        type: 'srcset',
                      }
                    ],
                    root: './',
                  },
                },
              },

            /**
             * 
             * Image file resolving
             */
            {
                test: /.(png|jpeg|jpg|gif|svg)$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        name: 'assets/img/[name].[ext]',
                        publicPath: '../../',
                        esModule: true,
                    }
                },
                //type: 'asset/resource',
            },

            /**
             * 
             * Fonts Resolving
             */
            {
                test: /.(ttf|woff)$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        name: 'assets/fonts/[name].[ext]',
                        publicPath: '../../'
                    }
                }, 
                //type: 'asset/resource',
            },
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'static/styles/[name].css',
            chunkFilename: '[id].css',
        }),

        new HtmlWebpackPlugin( {
            filename: 'index.html',
            template: 'src/index.html',
        })
    ]
}

Answer

This is not allowed to have multiple stylesheets into one javascript file. Maybe possible but not with this configuration.

Multiple stylesheet does not working with Webpack 5.11.0

Advertisement

Answer