In Electron-React-Webpack app I'm getting this error message:
web:1 Refused to apply style from 'http://localhost:3000/assets/css/icons/iconfont.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
src/app$ nano index_web.html
src/assets/css/icons$ ls -lah
total 244K
drwxrwxr-x 2 raphy raphy 4,0K feb 14 18:02 .
drwxrwxr-x 4 raphy raphy 4,0K feb 14 18:02 ..
-rw-rw-r-- 1 raphy raphy 92K feb 14 18:02 iconfont.css
-rw-rw-r-- 1 raphy raphy 143K feb 14 18:02 iconfont.woff2
.webpack/assets/icons$ ls -lah
total 244K
drwxrwxr-x 2 raphy raphy 4,0K feb 15 10:31 .
drwxrwxr-x 4 raphy raphy 4,0K feb 15 10:31 ..
-rw-rw-r-- 1 raphy raphy 92K feb 15 10:31 iconfont.css
-rw-rw-r-- 1 raphy raphy 143K feb 15 10:31 iconfont.woff2
What's wrong with my configuration? :
webpack.plugins.js :
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin")
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = [
new ForkTsCheckerWebpackPlugin(),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "./src/data"),
to: path.resolve(__dirname, ".webpack/data")
},
{
from: path.resolve(__dirname, "./src/assets/css"),
to: path.resolve(__dirname, ".webpack/assets")
}
]
}),
// https://reposhub.com/javascript/css/webpack-contrib-sass-loader.html
// https://www.developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: process.env.NODE_ENV !== 'production' ? '[name].css' : '[name].[hash].css',
chunkFilename: process.env.NODE_ENV !== 'production' ? '[id].css' : '[id].[hash].css'
})
];
In webpack.rules.js :
{
test: /\.pcss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
use: 'url-loader',
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
use: [
process.env.NODE_ENV !== 'production'
? 'style-loader' // fallback to style-loader in development. Creates `style` nodes from JS strings
: MiniCssExtractPlugin.loader,
'css-loader', // Translates CSS into CommonJS
{
loader: 'sass-loader', // Compiles Sass to CSS
options: {
sourceMap: process.env.NODE_ENV !== 'production'
}
}
]
},
In the html file:
<link rel="stylesheet" href="../assets/css/icons/iconfont.css" />
In package.json :
"devContentSecurityPolicy"
Update 1)
Following the indications found here : Stylesheet not loaded because of MIME type
I've removed the .. of the relative path:
From
<link type="stylesheet" href="../assets/css/icon/iconfont.css" />
To
<link type="stylesheet" href="/assets/css/icon/iconfont.css" />
The error message disappeared, but I'm not that sure the css file is correctly loaded ....
How to make the app correctly loading and display the css ?
