Error loading CSS file: 'Invalid MIME type detected, expecting text/css'

Can someone please help me figure out why none of the CSS files I linked are loading on my website? It's strange because the CSS for another page on the same site is loading without any issues.
My server is built using express and I'm using ejs as the templating engine.

Here is my EJS code:

    <link rel="stylesheet" href="./CSS/header.css">
    <link rel="stylesheet" href="CSS/index.css">
    <link rel="stylesheet" href="CSS/threads.css">
    <link rel="stylesheet" href="CSS/theme.css">

This is my server code written in Node.js:

app.use(express.static(__dirname + '/views')); 
app.set('view engine', 'ejs')
.
.
.
app.get('/thread/:thread', (req, res)=>{
    const thread_starter_html = get_thread_starter()
    const thread_replies_html = get_thread_replies()
    res.render('./thread.ejs', {thread_name: req.params.thread, thread_starter: thread_starter_html, thread_replies: thread_replies_html})
})

Here's the file structure of my project:

-/ Node Modules
|
-/ Views
|      -/CSS
|       |   -|..<css files>
|      -/JS
|       |   -|..<JS files>
|       | 
|      -|..<ejs files> 
|
-|server.js
..
..

These are the errors I'm encountering:
https://i.sstatic.net/FxPl9.png

I would greatly appreciate any assistance anyone can provide on this issue. Thank you.

htmlcssnode.jsexpressejs

Answer №1

Revision
After making the necessary adjustments, the issue was resolved successfully:

Modification 1:

app.use(express.static(__dirname + '/views')); 
TO
app.use(express.static(__dirname + '/views/'));

Modification 2:

 <link rel="stylesheet" href="./CSS/header.css">
  ...
TO 
 <link rel="stylesheet" href="/CSS/header.css">
  ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The rendering process failed when trying to deploy the backend

add image description here Currently, my backend is built using node.js with the express and mongoose packages connected to a MongoDB database. However, I encountered an error while deploying my backend on Render. ...

node.jsexpressdeploymentbackendrender

jquery modal not displaying

My page is designed to display a dialog containing a set of guidelines using a PHP script that determines which guideline(s) should be shown and generates the corresponding div element(s). Afterwards, I utilize a simple $(document).ready( function() { $(" ...

jqueryhtmldialog

Using Angular, you can easily add a <div> dynamically to all elements that share a class

In order to implement a solution, I am tasked with adding a new div element with the class '.cart-list-value .delete-product', which will contain a background image, to all elements that have the class .cart-list-item. Although I successfully man ...

htmlangulardomangular-renderer2

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

htmlcsstwitter-bootstrap

I'm looking for an AngularJS module that functions like the NodeJS request library. Can anyone point

Hello everyone, I am in search of an AngularJS module that streamlines HTTP/HTTPS requests and includes additional features similar to the popular request library for NodeJS (https://github.com/request/request) The default $http uses promises, which can ...

ajaxangularjsnode.jshttp

Having trouble with npm commands on Ubuntu?

After setting up node and npm on my Ubuntu 14.04 system, I encountered a problem when trying to run npm commands. The error message that popped up is as follows: /usr/local/lib/node_modules/npm/lib/config/cmd-list.js:113 module.exports.aliases = Object.as ...

node.jsnpmnpm-install

How can I ensure consistency in style and components across various HTML files while allowing for unique body content?

I'm new to web development and I'm curious about the best way to create multiple pages with the same components (header, sidebar, footer) but different content. I've seen suggestions for using PHP includes and HTML imports. Let's take ...

htmldjango

Searching for the app_secret for the WhatsApp Business API: A step-by-step guide

While coding in node js, I encountered a setup requirement that included the following: APP_ID=<<YOUR-WHATSAPP-BUSINESS-APP_ID>> APP_SECRET=<<YOUR-WHATSAPP-BUSINESS-APP_SECRET>> RECIPIENT_WAID=<<YOUR-RECIPIENT-TEST-PHONE-NUMBE ...

node.jswhatsapp-cloud-api

Useragent-dependent styling conditions

How can I select the appropriate stylesheet based on the useragent? For instance, I would like to display a specific css style for Android and another for iPhone. Is it achievable using only css? Can media queries be utilized? Appreciate any help in ad ...

javascripthtmlcss

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

Context In my project, I am working with a plain JavaScript array that starts off empty but gets populated with Knockout observables later on. These values are numbers and I need to compare them with values in another Knockout observable array. The issue ...

javascripthtmlknockout.jsko.observablearray

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

Using dynamic tag names within React JSX can greatly enhance the flexibility and

I'm working on creating a React component for HTML heading tags (h1, h2, h3, etc.), where the heading level is determined by a prop. Here is how I attempted to approach it: <h{this.props.level}>Hello</h{this.props.level}> My expected out ...

javascriptnode.jsreactjsjsx

The settings of the button return to their default state once it is clicked on

I've been working on a small project and I added a button with hover and CSS effects. However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied. I attempted to troubleshoot if ...

javascripthtmlcss

Using Sequelize to establish a model and implement a beforeCreate hook

In my code, I have defined a hook beforeCreate like this: module.exports = function (sequelize, DataTypes) { var userSchema = sequelize.define('User', { // define... }); userSchema.beforeCreate(function (model) { debug('Info: &a ...

node.jssequelize.js

There seems to be a connection issue between my Jquery and HTML, as they

I've hit a roadblock because my jQuery isn't connecting and I can't seem to figure out why. It's been stumping me for hours. Here is the HTML code snippet from exercise6.html: <!DOCTYPE html> <html lang="en> <h ...

javascriptjqueryhtml

The GIF Loader fails to animate while an AJAX request is in progress

Displaying a DIV element containing a loading GIF image while waiting for an AJAX call response. Initially, the DIV element is hidden. Upon clicking a checkbox, the loader DIV is shown, followed by the completion of the AJAX call, and then hiding the load ...

javascriptjqueryhtmlajaxanimated-gif

A hover effect in CSS that utilizes a psuedo element to overlay the primary element

When hovering, I want to achieve an effect that looks similar to the display below: To view my website, click here The relevant code is shown below with the !important attributes removed: .cta-button-menu, .cta-button-menu::before { transitio ...

htmlcsswordpress

What is an alternative way to retrieve the page title when the document.title is unavailable?

Is there a way to retrieve the page title when document.title is not available? The code below seems to be the alternative: <title ng-bind="page.title()" class="ng-binding"></title> How can I use JavaScript to obtain the page title? ...

javascripthtmlangularjs

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

How to properly size a child div inside a parent container

I'm having trouble with sizing a child div inside a parent div. The problem is that the child div's size changes according to the number of elements it contains, but I want all the child divs to be the same size regardless. This issue arises with ...

javascripthtmlcssreactjs