Error importing mobiscroll css styles in webpack

Question

I have a problem with importing mobiscroll css styles in my react project (created by webpack) Other css files are working well but This line generates Error:

import '@mobiscroll/react-lite/dist/css/mobiscroll.min.css'

The generated Error:

./node_modules/@mobiscroll/react-lite/dist/css/icons_mobiscroll.ttf?vtxdtu 1:0
Module parse failed: Unexpected character '�' (1: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
(Source code omitted for this binary file) 

./node_modules/@mobiscroll/react-lite/dist/css/icons_mobiscroll.woff?vtxdtu 1:4
Module parse failed: Unexpected character '�' (1:4)
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
(Source code omitted for this binary file)

./node_modules/@mobiscroll/react-lite/dist/css/icons_mobiscroll.woff 1:4
Module parse failed: Unexpected character '�' (1:4)
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
(Source code omitted for this binary file)

and my webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const CSSModuleLoader = {
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: "[name]__[local]___[hash:base64:5]",
        },
        sourceMap: true
    }
};

const CSSLoader = { loader: 'css-loader' };

const PostCSSLoader = {
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        sourceMap: false, // turned off as causes delay
        plugins: () => [
            autoprefixer({
                browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
            })
        ]
    }
};

const StyleLoader = {
    loader: 'style-loader'
};

const SassLoader = {
    loader: 'sass-loader'
};

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }, {
                test: /\.html$/,
                use: [{loader: 'html-loader'}]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /\.module\.(sa|sc|c)ss$/,
                use: [StyleLoader, CSSLoader, PostCSSLoader, SassLoader]
            },
            {
                test: /\.module\.(sa|sc|c)ss$/,
                use: [StyleLoader, CSSModuleLoader, PostCSSLoader, SassLoader]
            },
            {
                test: /\.(svg|png|jpe?g|gif|bmp)$/,
                loader: 'url-loader?limit=10000&name=img/[name].[ext]'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=[name].[ext]'
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [ // for copying the content of 'public/static' folder to 'dist' folder
                { from: path.resolve(__dirname, 'public/static'), to: path.resolve(__dirname, 'dist/static')}
            ]
        }),
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html',
            filename: 'index.html',
            inject: 'body'
        }),

    ]
};

my webpack configuration is working well for all other css or scss files but can not load that css file. what's the problem? please help me with this.

Answer 1

I found out my mistake. I haven't defined a loader for font files and that css file was using some fonts. This solved my Problem:

{
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    // exclude: /node_modules/,
    loader: 'file-loader',
    options: {
        limit: 1024,
        name: '[name].[ext]',
        publicPath: 'dist/assets/',
        outputPath: 'dist/assets/'
    }
}