Refused to apply style from {filename} because its MIME type ('text/html') is not a supported stylesheet MIME type

Question

I have an index.ejs file that I am using with Express for a localhost web server and I am getting 4 errors of 2 types: Errors Here is my code:

<html>
<head>
    <title>Home</title>
    <!-- <link rel="stylesheet" type="text/css" href="styles/main.css"> -->
    <link rel="stylesheet" type="text/css" href="styles/mobile.css">
    <link rel="icon" href="public/styles/images/icon.png">
</head>
<style type="text/css">
@import url("styles/main.css");
</style>
<body>
    <nav>

    </nav>
    <main>

    </main>
    <footer>

    </footer>
    <script type="text/javascript" src="scripts/javascript/main.js"></script>
    <script type="text/javascript" src="scripts/javascript/mobile.js"></script>
</body>

I tried making test CSS and JavaScript files in the same directory as the index.ejs file but I got errors for those as well. When I change the file type to index.html, there are no errors which was interesting. If someone could tell me why that is that would help a lot. Thanks!

Possible duplicate of expressjs Static Files not being served — Randy Casburn

Lord Elrond Lord Elrond · Accepted Answer · 2019-03-13T02:11:29

I've never seen the @import url("styles/main.css"); method, so I can't say it won't work.

Typically you get that error when you have an error in your css/js path, or your didn't properly configure your public folder on your app.js.

Make sure you have app.use(express.static('public'));, and that you have a folder called public, which has the following folders: css, js, images. Put all of your js/css/images in these folders.

Then on your index.ejs change the following:

//to reference a css file:
<link rel="stylesheet" src="/css/yourFile.css">

//to reference a js file:
<script href="/js/yourFile.js"></script>

//to reference an image:
<link rel="icon" src="/images/yourImage.png">

Refused to apply style from {filename} because its MIME type ('text/html') is not a supported stylesheet MIME type

1 Answers