Static Web Apps shows "Refused to apply style from <URL> because its MIME type ('text/html') is not a supported stylesheet MIME type"

Question

I deployed to Azure Static Web Apps the default app that comes whenever you create a new Blazor WebAssembly app via dotnet new blazorwasm. At first it works properly but when I added webpack to build my SASS file, it showed me this error once it gets deployed to Azure SWA that says: Refused to apply style from <URL> because its MIME type ('text/html') is not a supported stylesheet MIME type on the Blazor generated CSS file and the _framework/blazor.webassembly.js file; which is interesting given that those files are supposed to be the default files Blazor generates.

Also the MIME type as viewed on the dev tools shows incorrectly for these two files, but they used to have correct MIME types before I added webpack.

The webpack-generated CSS file is successfully created and can be viewed on the browser. Also I tested the dotnet publish version of the app using the SWA cli/emulator and I didn't encounter the error.

Answer 1

Finally I was able to resolve this by adding this line during the build and deploy step in my Github workflow file:

app_build_command: "npm run build && dotnet publish -c Release -o /bin/staticsites/ss-oryx/app/"

I referenced the workaround from this issue on the Oryx builder where it treats the project as Node.js instead of Blazor whenever it sees the package.json and the csproj file in the same directory.

Answer 2

In my case, I had a routing configuration too broad that was redirecting all pages to the main page. That was also causing that the json and css files were not received, instead the main page's Html.

Something like this would cause it. Note that I tried to solve it by hinting the Mime type in the config file, but the problem indeed was the configured route:

{
"routes": [
    {
    "route": "/*",
    "rewrite": "/index.html"
    }
],
"mimeTypes": {
  ".json": "text/json",
  ".css": "text/css"
}

}