search

sveltejs / template-webpack

Template for building basic Svelte applications with webpack
300 stars 118 forks source link

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

Closed muhammad-usman-anwar closed 4 years ago

muhammad-usman-anwar commented 4 years ago

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

image

gavinr commented 4 years ago

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 commented 4 years ago

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: https://github.com/sveltejs/template-webpack/issues/12#issuecomment-523763571

muhammad-usman-anwar commented 4 years ago

@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 commented 4 years ago

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.