Error importing mobiscroll css styles in webpack - css

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/'
}
}