Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Elena Man
Elena Man
21,092 Points
Posted by Elena Man
Elena Man
21,092 Points

MIME type ('text/html') is not a supported stylesheet MIME type

Hi! I am making a web page using nodejs and pug and I get this error in the Google Chrome console when running the .js file:

"Refused to apply style from 'http://127.0.0.1:3000/static/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

This is the index.pug segment where I am serving the css

doctype html
html.no-js(lang='')
    head
        meta(charset='utf-8')
        meta(name='description', content='')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        title Licenta 2019
        link(rel='stylesheet', href='../static/css/bootstrap.min.css', type='text/css')
        link(rel='stylesheet', type='text/css', href='../static/css/main.css')
        link(rel='stylesheet', type='text/css', href='../static/css/responsive.css')
        link(rel='stylesheet', type='text/css', href='../static/css/bootsnav.css')
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')

And this is my server.js

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, "static")));

app.set('view engine', 'pug');

app.get('/', (req, res) => {
    res.render('index');
})

app.listen(3000);

server.js is in the root folder while the css files are in static/css/

index.pug is in the views folder

It works if i do the following but I don't believe this is necessarily a "pretty" fix:

html.no-js(lang='')
    head
        meta(charset='utf-8')
        meta(name='description', content='')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        title Licenta 2019
        style
            include ../static/css/main.css

1 Answer

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

It's frustrating that the official Pug docs don't cover how to include stylesheets at all -- at least, I couldn't find it. Gives me a bad feeling about using Pug at all -- even though I know some folks do. Answers on StackOverflow suggest that you've written the line correctly. I'd recommend at least making the stylesheet lines super-consistent, just to make sure there isn't some crazy reason that the attributes need to be written in an exact order or something:

link(rel='stylesheet', href='../static/css/bootstrap.min.css', type='text/css')
link(rel='stylesheet', href='../static/css/main.css', type='text/css')
link(rel='stylesheet', href='../static/css/responsive.css', type='text/css')
link(rel='stylesheet', href='../static/css/bootsnav.css', type='text/css')
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', type='text/css')

Only reason I'm thinking that matters is that it's not saying your first stylesheet is wrong, but your second one. So the first one seems okay...