I am using react and trying to use material icons offline. So i have downloaded the material woff file and included the material.css into the index.html page but it is giving me the error as
"Refused to apply style from 'http://localhost:8081/src/assets/materialIcons.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> -->
<link rel="stylesheet" type="text/css" href="../src/assets/materialIcons.css">
<link rel="icon" href="icons/favicon.ico" />
<link href="icons/apple-touch-icon.png" type="image/png" rel="apple-touch-icon icon shortcut" />
<link href="icons/apple-touch-icon-60x60.png" type="image/png" rel="apple-touch-icon" sizes="60x60" />
<link href="icons/apple-touch-icon-76x76.png" type="image/png" rel="apple-touch-icon" sizes="76x76" />
<link href="icons/apple-touch-icon-120x120.png" type="image/png" rel="apple-touch-icon" sizes="120x120" />
<link href="icons/apple-touch-icon-152x152.png" type="image/png" rel="apple-touch-icon" sizes="152x152" />
<title>
Driver Communication
</title>
</head>
<body>
<div id="root"></div>
</body>
</html>the web pack.dev code is as follows
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
symlinks: false
}
};
