ionic/angular2 - Refused to apply style from 'http://localhost:8100/build/main.css' because its MIME type ('text/html') is not a supported

Question

My ionic build was working perfectly up until I wanted to test on my iPhone so I stopped my server and then did a ionic serve --address localhost and I noticed that my stylesheet wasn't loading anymore... so I killed the server again went back to ionic serve and the error persisted..

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

I've tried clearing the the cache on localhost:8100 and rebuilding the project but the error remains...

Any ideas? I'm pretty much stuck until this gets resolved :(

Edit: The way I ended up fixing it might not be the best.. but at least it works again. I just went into my github repository for my app downloaded the main.css and pasted it into the build folder and I've not had a problem since.

Solution 1

I followed these instructions which were posted on the ionic framework forum.

Serve your project with ionic serve and then just change any .ts file and save it (ctrl+s) and it will automatically build again and serve the app & error will be resolved, hopefully :).

Note: You have to do this every time on the initial ionic serve.

Check out the full answer here

Solution 2

FYI ran into exactly the same issue after I upgrade webpack. My version of webpack was ^3.11.0, then went to 4.x.x which caused a lot of issues. Recommend you downgrade webpack until ionic supports the newer version of webpack.

Solution 3

I believe there may be some compatibility problems with Webpack (or other packages). This seems to have be introduced with the @ionic/app-scripts version 3.2.*. Use any version up to 3.1.11 and this problem does NOT occur. I would suggest do the following:

• in your package.json change the version of @ionic/app-scripts to "@ionic/app-scripts": "^3.1.11"
• delete the package-lock.json file
• delete your node_module folder
• run npm install
• ensure that the version of @ionic/app-scripts is lower than 3.2

Comments

[Simon]

Thanks for the comment.. but my build/main.css is being linked like this: <link href="build/main.css" rel="stylesheet"> inside of index.html is that not correct?

[Christo Goosen]

That should be fine to be honest. Still try type="text/css". Otherwise a wild guess is around CORS settings: blog.ionicframework.com/handling-cors-issues-in-ionic

[Indy-Jones]

I think this one needs to get a few more upvotes as this appears to be linked to web pack and adjusting the version as @Christo Goosen suggests worked perfectly.