未为 GitHub 页面加载 CSS

Question

I have a site published with GitHub pages:

https://safelyswift.github.io/Swizzle/

I want to use docs/css/style.css in my index.html file. I have tried using the full url, GitHub raw url, and shortened url but none of them work.

ie: I have tried many variations on this line:

<link rel="stylesheet" href="https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css">

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

<link rel="stylesheet" href="https://raw.githubusercontent.com/SafelySwift/Swizzle/master/docs/css/style.css">

but none work.

Getting error:

Did not parse stylesheet at 'https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css' because non CSS MIME types are not allowed in strict mode.

in Safari debug console.

Answer 1

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

Answer 2

You should link to css/style.css , which is short of https://safelyswift.github.io/Swizzle/css/style.css because the root directory of your GitHub Page is /docs .

The reason " https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css " not work is because this link actually goes to the GitHub code preview page. It's not a valid CSS file but an HTML page with lots of GitHub functions(preview, commit log, history, etc.) But " https://safelyswift.github.io/Swizzle/css/style.css " is served by GitHub Page, so this link contains only pure CSS file which is valid.

To see the difference between these files. Just navigate these link with your browser, and right-click your page to see the source code. You can see what your browser sees there.