After removing the rel = "stylesheet" attribute, the MIME type error has been resolved, however, the styles are still not loading properly

I found that some suggestions to remove rel="stylesheet" didn't work for me. However, after consulting the expressjs documentation at https://expressjs.com/en/starter/static-files.html, I discovered that using the express.static function is the way to go when serving static files like CSS and JavaScript.

app.use(express.static('public'))

Once you have set this up, you can easily load any file within the public directory. For example, if you have a style.css file located in {PROJECT_PATH}/public/css/,

you can access it using

http://localhost:3000/css/style.css

.

Encountering a similar issue while working on a full stack web application in development, I found a simple solution by properly linking the css file to the rendered page. Simply removing the rel = stylesheet as suggested before may hide the error from appearing in the browser, but it won't load the necessary styles for the page. In essence, it's not a true solution.

If you are utilizing express-static, consider the following:

Server-side:

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

Client-side:

 <link type="text/css" rel="stylesheet" href="/main.css">

Make sure to include a forward slash at the beginning of the file you want to link to the html page (if you're not using any template engines) and let express-static handle the rest automatically for you.

Encountered a similar issue with a javascript file instead of CSS while working on an Angular application. Surprisingly, the root cause was not related to the Mime type error message initially suggested, but rather a "404 Not Found" error.

In my situation, placing the script file outside of the designated "assets" folder triggered the 404 error and eventually led to the mime type complication. The solution that worked for me involved including the following tag within the index.html head section:

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

It's important to note that the assets folder should be located at the same level as the Index.html file in order for this setup to function correctly.

The solution to my issue was as follows:

app.use('/assets', express.static(path.join(__dirname, "assets")));

One handy trick is to prepend a forward slash / before the path indicating the stylesheet being utilized. In my case, it was originally href='css/style.css', but I modified it to href='/css/style.css'. The result was seamless and worked perfectly.

After encountering the same issue, I decided to make a change.

By relocating the script file to a new directory, the error disappeared:

from

<script src="./scripts/simple-keyboard/keyboard.index.min.js" type="text/html"></script>

to

<script src="./scripts/keyboard.index.min.js" type="text/javascript"></script>

As pointed out by Davelli, it wasn't a mismatch in files but rather an unexpected error message. The fact that it gave the wrong error is puzzling!

I found a quick solution by simply adding a "/" before "css/style.css"

<link rel="stylesheet" href="css/styles.css" /> 

changing it to

<link rel="stylesheet" href="/css/styles.css" />

Another step I took was implementing express.static('public')

If the provided solution does not resolve the issue:

 app.use(express.static('public'))//configuring for server
<link rel="stylesheet" href="/index.css">//adding styles

Ensure that the "public" directory exists in the main project folder. This step was crucial in my situation.

Dealing with a similar issue, I discovered the importance of using the correct directory for the style.css file. Implementing the code snippet below resolved the problem flawlessly.

<link rel="stylesheet" type="text/css" href="/app/scss/style.css">

I found success by updating

<script type="text/javascript" src="/lib/matrix.js"></script>

to

<script type="text/javascript" src="./lib/matrix.js"></script>

Encountering a similar issue, I found a solution through advice given by Kirankumar Gonti.

To resolve the problem, include the following line of code:

app.use('/public', express.static(path.join(__dirname, "public")));

Ensure that you define the const path correctly.

Additionally, validate that your css directory is nested within a public folder.

Encountered the same issue and found a solution thanks to Kirankumar Gonti's advice.

To resolve the problem, I added this line of code to my app.js file since my style.css was located in a css folder instead of a public folder:

app.use('/css', express.static(path.join(__dirname, "css")));

In my /css/style.css file, I included this link:

<link rel="stylesheet" type="text/css" href="/css/style.css" />

If you're still encountering this issue, I managed to resolve it by adding "src/assets" to my angular.json file:

"assets": ["src/favicon.ico", "src/assets", "src/upload.php"]

Furthermore, make sure not to include the directory of your index.html in the assets. In other words, do not add "src" to the list of assets.

Encountered a similar issue, but with some investigation I discovered that you should only reference the file within a specific folder rather than the entire directory. For instance, if you are referencing the public root inside static app.use(express.static(public

)), then you just need to include 

<link rel=stylesheet href =css/styles.css> and not the full directory path.

"Error message: CSS file blocked due to MIME type mismatch" encountered when using VS Code along with Live server

If you come across this issue while testing with Live Server (or a similar tool) in VS Code, it may appear that the extension is incorrectly assigning mime types to CSS files, when in reality it is displaying a 404 error because of an incorrect setup in the root directory of your VS Code workspace causing the resources to not be accessible. Usually, if your workspace root directory is set above the actual app's root directory, this mistake can easily slip by unnoticed in VS Code during development, but it becomes apparent when debugging due to the incorrect resource references.

Make sure to include the type attribute in your link/script tag to avoid potential errors.

<script defer src="./index.js" type="application/javascript"></script>