These are the error messages I'm getting:
Refused to apply style from 'http://localhost:3000/search_window/min/dist/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:3000/search_window/min/ext/icons/iconfont.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
bundle.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:1 Refused to apply style from 'http://localhost:3000/search_window/min/dist/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:3000/search_window/min/ext/icons/iconfont.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
In package.json :
"mainConfig": "./webpack.main.config.js",
"devContentSecurityPolicy": "default-src 'unsafe-eval' 'self'; script-src-elem 'self' 'unsafe-inline'; img-src *; style-src 'self' 'unsafe-inline'; font-src 'self' https://static2.sharepointonline.com; connect-src 'self' https: http:",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/app_S/index_S.html",
"js": "./src/app_S/renderer_S.ts",
"css": ["./src/app_S/min/dist/bundle.css", "./src/app_S/min/ext/iconfont.css"],
"preload": {
"js": "./src/main/preload/preload.ts"
},
"name": "search_window"
In /src/app_S/index_S.html :
And in app_S/min/dist :
-rw-rw-r-- 1 raphy raphy 354K set 30 19:51 build.js
-rw-rw-r-- 1 raphy raphy 41K set 30 19:51 bundle.css
-rw-rw-r-- 1 raphy raphy 915K set 30 19:51 bundle.js
-rw-rw-r-- 1 raphy raphy 349K set 30 19:51 localization.build.js
-rw-rw-r-- 1 raphy raphy 28K set 30 19:51 preload.js
The bundle.css is obtained through this script app_S/min/scripts/buildBrowserStyles.js :
const path = require('path')
const fs = require('fs')
const outFile = path.resolve(__dirname, '../dist/bundle.css')
const modules = [
'../../../src/assets/css/base.css',
'../../../src/assets/css/windowControls.css',
'../../../src/assets/css/modal.css',
'../../../src/assets/css/tabBar.css',
'../../../src/assets/css/tabEditor.css',
'../../../src/assets/css/taskOverlay.css',
'../../../src/assets/css/webviews.css',
'../../../src/assets/css/newTabPage.css',
'../../../src/assets/css/searchbar.css',
'../../../src/assets/css/listItem.css',
'../../../src/assets/css/bookmarkManager.css',
'../../../src/assets/css/findinpage.css',
'../../../src/assets/css/downloadManager.css',
'../../../src/assets/css/passwordManager.css',
'../../../src/assets/css/passwordCapture.css',
'../../../src/assets/css/passwordViewer.css',
'../../../node_modules/dragula/dist/dragula.min.css'
]
function buildBrowserStyles () {
/* concatenate modules */
let output = ''
modules.forEach(function (script) {
output += fs.readFileSync(path.resolve(__dirname, '../', script)) + '\n'
})
fs.writeFileSync(outFile, output, 'utf-8')
}
if (module.parent) {
module.exports = buildBrowserStyles
} else {
buildBrowserStyles()
}
which is run during the building phase:
in package.json :
"scripts": {
"watch": "node ./src/app_S/min/scripts/watch.js",
"buildMain": "node ./src/app_S/min/scripts/buildMain.js",
"buildBrowser": "node ./src/app_S/min/scripts/buildBrowser.js",
"buildBrowserStyles": "node ./src/app_S/min/scripts
/buildBrowserStyles.js",
"buildPreload": "node ./src/app_S/min/scripts/buildPreload.js",
"build": "yarn run buildMain && yarn run buildBrowser && yarn run
buildBrowserStyles && yarn run buildPreload",
"start": "yarn run build && concurrently \"yarn run watch\"
\"electron-forge start --inspect-electron\"",
In webpack.rules.js:
{
test: /\.css$/i,
type: 'asset', // https://github.com/webpack-contrib/postcss-loader/issues/580#issuecomment-1130126061
use: [
{
loader: "style-loader"
},
{
loader: "postcss-loader"
},
{
loader: "css-loader"
}
],
//generator: {
//outputPath: '.webpack/assets/css/'
//},
},
These are the first lines of bundle.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
font-family: ".SFNSText-Regular", "BlinkMacSystemFont", "Helvetica Neue",
"Segoe UI", "Arial", sans-serif;
}
/* TODO figure out why the default focus color in Electron is orange */
*:focus {
outline-color: rgb(0, 117, 255);
}
.dark-mode *:focus {
outline-color: transparent;
}
body.mac * {
letter-spacing: 0.4px;
}
[hidden] {
display: none !important;
}
It seems to me that the files paths are correct... What could be the causes for not applying the style and for not loading the bundle.js file? Looking forward for your kind help
Update 1)
Exchanging href with src in index_S.html file the error messages disappear but the page is still not correctly and fully rendered :
