Kevin Powell - Community•8mo ago

Jekyll error for stylesheet linked to html file

I am new to using Github Pages/Jekyll and I have encountered an issue that I just cannot seem to resolve. I am trying to host my project locally for developing. My (relevant) file structure is:

jekyll-site/
├── _assets/
│   └── css/
│       └── 404.css
└── pages/
    └── 404.html

jekyll-site/
├── _assets/
│   └── css/
│       └── 404.css
└── pages/
    └── 404.html

in 404.html head I have

  <link rel="stylesheet" type="text/css" href="{{ '/assets/css/404.css' | relative_url }}">

  <link rel="stylesheet" type="text/css" href="{{ '/assets/css/404.css' | relative_url }}">

When I run the server and navigate to the 404 page, my github codespaces terminal says

ERROR `/assets/css/404.css' not found.

ERROR `/assets/css/404.css' not found.

When I use the inspect console on the page, I get the error

Refused to apply style from 'https://[codespacesid-]4000.app.github.dev/assets/css/404.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to apply style from 'https://[codespacesid-]4000.app.github.dev/assets/css/404.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

How can I make it so that the stylesheet is applied? Note: It does this for all html/css pairs

3 Replies

LizzyOP•8mo ago

Also notable: the same happens when it is

<link rel="stylesheet" href="/assets/css/404.css">

<link rel="stylesheet" href="/assets/css/404.css">

Additionally, the HTML files have frontmatter at the top. 404.html starts like this:

---
permalink: /404.html
title: 404 PAGE NOT FOUND
---

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/404.css">
</head>

---
permalink: /404.html
title: 404 PAGE NOT FOUND
---

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/404.css">
</head>

clevermissfox•8mo ago

Looks like this is a common issue. I am not familiar with Jekyll but maybe this can help

clevermissfox•8mo ago

Did I not paste the link? 🤦🏻‍♀️ https://talk.jekyllrb.com/t/jekyll-website-behaves-like-there-is-no-css-file/2820

Jekyll Talk

Jekyll website behaves like there is no css file

Hello! I have problems whith my Jekyll site. When I run it locally everything is fine, but on my github page looks like this( https://gerganatsirkova.github.io/lawyer-s-website/ ), like there is no css file at all. Link to my repo https://github.com/GerganaTsirkova/lawyer-s-website Does somebody know where are my mistakes?

Gaming

Programming

Jekyll error for stylesheet linked to html file