1

I am making a reactjs web app and would like to use react-bootstrap. My index.html looks as:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Winova</title>
  <link rel="stylesheet" href="assets/styles/bootstrap.min.css">
<body>
  <section id="index"></section>
</body>
</html>

Error I get: Refused to apply style from 'http://localhost:8098/assets/styles/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

If I add it like this it works:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

The thing is I dont want to rely on external links, I would like to have my own copy of it on my server.

Mizlul
  • 1
  • 7
  • 41
  • 100
  • This link might have the answer you're looking for: https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type – Mathias Rechtzigel May 14 '18 at 17:19

1 Answers1

0

Late reply, but quick (possible) fix if you got here looking for an answer.

The relative path you're using does not point to the file correctly. If you look in the console, you'll most likely see the load "cancelled" and the response headers will be mime-type text/html, hence the error message.

Try adding "./" to point to the application root.

href="./assets/styles/bootstrap.min.css"

There are more details in the comment link mentioned on the original question.

Chaos7703
  • 691
  • 9
  • 18