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 trialNeil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsRefusing to apply styles due to MIME type ("text/html")
I get an error when it tries to apply the styles in my app:
"Refused to apply style from 'http://localhost:3000/patrons/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
If I type in on the root route /stylesheets/style.css, then it lists my styles, it appears the client doesn't want to see it as CSS though, any thoughts on how to solve this?
3 Answers
Robert Schaap
19,836 PointsMake sure the MIME type of the stylesheet is set to text/css in your HTML or whatever template engine you're serving from. That should do it. You could probably remove the type altogether but some back-ends need specifics when serving files.
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css" >
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsMy App.js
const express = require("express");
const app = express();
const sequelize = require("./models").sequelize;
const Book = require("./models").Book;
const Patron = require("./models").Patron;
const Loan = require("./models").Loan;
const bodyParser = require('body-parser');
const moment = require("moment");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
sequelize.sync().then(function(){
app.listen(3000);
});
app.set("view engine", "pug");
app.get("/", (req,res) => {
res.render("home");
});
app.get("/books/new", (req,res) => {
res.render("new_book");
});
app.post("/books/new", (req, res, next) => {
Book.create(req.body)
.then(book => {
return res.redirect("/books/all");
console.log(req.body);
})});
PUG
doctype html
html
head
title New Book
link(rel='stylesheet', href='stylesheets/style.css')
nav
ul
li
a(href='/books/all') Book
li
a(href='/patrons/all') Patron
li
a(href='/loans/all') Loan
body
h1 New Book
form(method="post")
p
label(for='title') Title
input#title(type='text' name="title" value= title)
p
label(for='author') Author
input#author(type='text' name="author" value= author)
p
label(for='genre') Genre
input#genre(type='text' name="genre" value= genre)
p
label(for='first_published') First Published
input#first_published(type='text' name="first_published" value= first_published)
p
input(type='submit', value='Create New Book')
Robert Schaap
19,836 PointsI just tried (had to cut out the sequelize stuff though) but I can't reproduce it. If changing the link in home.pug to link(rel='stylesheet' type="text/css" href='/stylesheets/style.css')
, so with the type="text/css"
doesn't fix it, it's something else. I added a forward slash in front of the link to the sheet as well, pug has issues with that sometimes.
I googled a little bit and found a few older issues, a lot seems to be related to Google Chrome specifically, so maybe it's browser specific, though it's probably triggered from the type missing.
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsI've tried putting type in and I've tried it in internet explorer, it still seems to create the same issue, thanks for trying though Robert :)
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsNeil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsHi Robert, I tried that and it still doesn't seem to want to serve the CSS files to the browser! D:
Robert Schaap
19,836 PointsRobert Schaap
19,836 PointsStrange. Could you copy/paste a bit from your app.js and your pug file? Or do you have it somewhere online?