when i review the stdout from running the script that calls webpack-dev-server IMO it is processing / emitting the scss | css OK. However the css is not included ( injected by dev server ) when you go to devtools and request "localhost: 8080" . Its as if the css does not exist.
Env: package.json
"webpack": "^4.38.0",
"webpack-cli": "^3.3.8",
"sass-loader": "^7.1.0",
"mini-css-extract-plugin": "^0.4.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"css-loader": "^1.0.0",
"del": "^2.2.2",
"dialog-polyfill": "^0.5.6",
"ejs": "^2.5.7",
"ejs-loader": "^0.3.1",
"devDependencies": {
"eslint": "^5.12.0",
"eslint-loader": "^2.1.1",
"webpack-dev-middleware": "^4.1.0",
"webpack-dev-server": "^3.7.2"
package json script:
"dev": "GOOG_ATION_CREDE=app/workbox-demos-4dee.json node app/server.js",
server.js uses express + webpack middleware
const app = express();
const config = require('../webpack.config.dev.js');
const compiler = webpack(config);
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
webpack.config.dev.js
output: {
filename: '[name].bundle.js',
publicPath: '/'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './',
},
module: {
rules: [
{ test: /\.js$/,
exclude: [
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, "app/scripts/cacheWorker.js")
],
use: {
loader: 'babel-loader',
}
},
{test: /\.html$/,
e: [
{
loader: "html-loader",
options: { minimize: true }
}
]},
{ test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
},
{
loader: "sass-loader",
options: {
includePaths: ['./node_modules']
}
}
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css",
chunkFilename: "[id].css"
}),
css imports from express.app
import "../styles/main.css";
import {MDCMenu} from '@material/menu';
import "../styles/camer.css";
stdout from $npm run dev
app running http://localhost:8080 /home/rob/src/web-spch-v2/app
Hash: 771fef3df3589e3ab505
Version: webpack 4.46.0
Time: 3719ms
Built at: 01/19/2021 5:21:53 PM
Asset Size Chunks Chunk Names
7719fdcabdc03146e2da973edaac2425.png 17.8 KiB [emitted]
apple-touch-icon.png 9.79 KiB [emitted]
bundle.css 208 KiB main [emitted] main
ec2f90c63e57675db0e442e5d5f5f447.png 813 bytes [emitted]
main.bundle.js 1.2 MiB main [emitted] main
manifest.pwa.json 1.1 KiB [emitted]
scripts/.eslintrc.json 338 bytes [emitted]
scripts/app2.js 21 KiB [emitted]
scripts/cacheWorker.js 1.56 KiB [emitted]
scripts/config.js 3.7 KiB [emitted]
scripts/main.js 16.1 KiB [emitted]
service-worker.js 9.08 KiB [emitted]
service-worker.js.map 10.9 KiB [emitted]
styles/camer.css 12.4 KiB [emitted]
styles/dialog-polyfill.css 636 bytes [emitted]
styles/list.scss 3.05 KiB [emitted]
styles/main.css 5.31 KiB [emitted]
styles/media-player-icon.jpg 11.1 KiB [emitted]
styles/worker/create.js 9.24 KiB [emitted]
styles/zuck_hosp.png 17.8 KiB [emitted]
styles/zuck_hosp_ol.png 17.8 KiB [emitted]
var/browserTyp.html 3.41 KiB [emitted]
var/scripts/Mp3LameEncoder.js 1.27 MiB [emitted]
var/scripts/Mp3LameEncoder.min.js 283 KiB [emitted]
var/scripts/Mp3LameEncoder.min.js.mem 19.2 KiB [emitted]
var/scripts/mp3LameWorker.js 909 bytes [emitted]
var/scripts/recorderGR.js 3.91 KiB [emitted]
var/scripts/voice.js 26.2 KiB [emitted]
var/voice.html 3.46 KiB [emitted]
views/index.ejs 8.93 KiB [emitted]
views/inner.ejs 160 bytes [emitted]
views/logon.ejs 0 bytes [emitted]
views/mail.ejs 3 KiB [emitted]
views/mediaItems.ejs 3.12 KiB [emitted]
views/mediaplay.ejs 2.26 KiB [emitted]
views/tchannel.ejs 1.1 KiB [emitted]
views/test.ejs 1.77 KiB [emitted]
views/userchannel.ejs 1.56 KiB [emitted]
views/usermediaitems.ejs 2.33 KiB [emitted]
views/userplay.ejs 2.27 KiB [emitted]
workbox-3b8b670f.js 67.7 KiB [emitted]
workbox-3b8b670f.js.map 116 KiB [emitted]
workbox-demos-4d4e77aa9fee.json 2.31 KiB [emitted]
Entrypoint main = bundle.css main.bundle.js
