Error with loading bundle.css in development mode, MIME type error

[muhammad-usman-anwar]

Hi I was facing this issue on a project, first I thought I have messed up my webpack configuration. I tried few thing with my css plugins but nothing changed so I went about and created a fresh project using the template. Still giving the same issue.
The build one works fine generates a proper css file but having error in the development mode.
NPM has automatically installed the following versions.
webpack: v4.42.0
svelte: v3.19.1

[gavinr]

I am having this issue too.

Refused to apply style from 'http://localhost:8080/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[tedwash]

Looks like the README is missing a step. Since bundle.css doesn't exist yet, you have to run npm run build before npm run dev in order to output the file to the public folder.

Looks like this can be solved by updating the webpack config to serve bundle.css: #12 (comment)

[muhammad-usman-anwar]

@tedwash that is not a solution, doing this will yield a static load of css file (the result of build command) every time. Then what is the point of even running npm run dev, if you can't see the changes to the css made at runtime. And you have to rebuild app every time you make changes to the css.

[muhammad-usman-anwar]

#24 The pull request will resolve the issue.

Do the same change, replace prod ? MiniCssExtractPlugin.loader : 'style-loader' with MiniCssExtractPlugin.loader. The issue was with style loader.