拒绝应用来自“xxx/style.css”的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型

Question

I am new to Google App Engine and I'm trying to get the project I've been running locally hosted there. My index.html shows up but it is not applying the CSS to it. I'm not exactly sure what a MIME type is, and I'm not exactly sure where in my code it's trying to get this from. I just assumed that it would just load the tag that I have in my html and apply it like how it did while using browsersync. Index is loaded via:

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

CSS being loaded in index.html:

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

Answer 1

Permanant fix
server.js

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

and move all your static resources to public dir in your project then your html is valid Source

Answer 2

When you're returning the stylesheet from the server, you should set the content-type attribute for the header to text/css ie you should have something like

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

app.get('/style', (req, res) => {
    res.setHeader('Content-Type', 'text/css');
    res.sendFile(path.join(__dirname, '/style.css'));
});

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.sendFile(path.join(__dirname, '/index.html'));
});

Answer 3

The issue could probably be with the CSS library starting with comments.

In development, if the stylesheet is started with some comments, it could be seen as something different from CSS.

Removing the library and putting it into a vendor file, may solve the issue.

Another possibility for Node.js applications is that you should check your configuration.

Example:

app.use(express.static(__dirname + ‘/public’));

Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your HTML:

Example:

href=”/css/style.css”>

If you did include a forward slash /public/ , then you can just do href=”css/style.css”>.

Be sure that CSS name is style.css without the second s at the end, that could also cause the issue.