Static Web Apps shows "Refused to apply style from 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.

Did you drop that exact URL in the address bar of a Browser? I think it's that "nothing here" page that Blazor returns instead of a 404. — H H, Mar 03 '22 at 09:13
@HenkHolterman I'm thinking the same. Usually this kind of error is shown whenever the file can't be found, but what intrigues me is the other CSS and JS files can be located just fine. — Raffy, Mar 03 '22 at 11:03
Well, you can verify what's happening, we can't. Did you make any changes in Program.cs, or in `` ? Also, `samplblazor` is in all lower case, it normally is your exact App name. — H H, Mar 03 '22 at 11:31
I have posted my workaround for this issue. There's an existing issue on the Oryx builder that builds the project incorrectly. — Raffy, Mar 04 '22 at 01:58

score 0 · Answer 1 · answered Mar 04 '22 at 01:57

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.

score 0 · Answer 2 · answered May 17 '22 at 01:48

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"
}

}

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

2 Answers2