CODEWITHSUNDEEP
cssgithub
natearn
natearn

Reputation: 23

external stylesheet from a github release does not load

I created a .js and .css file from a project and added them to a github release

https://github.com/natearn/react-vim-tips/releases

I then attempted to add the code directly to a webpage using an external script and stylesheet (linking directly to the files in the release).

<script type="text/javascript" src="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.js"></script>
<link rel="stylesheet" type="text/css" href="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.css">

For context, the script creates a global function which renders a react component, which I execute elsewhere on the page.

The network requests for the files succeed after a redirect (so 302 then 200), the javascript loads and runs, but the css rules do not get added to the page.

When I copy the stylesheet and fetch it locally, it works. So I believe the problem is in the mechanism of delivery from the CDN.

Can someone tell me what might be happening here, and how I can fix it?

Upvotes: 0

Views: 208

Answers (2)

Mark Carpenter Jr
Mark Carpenter Jr

Reputation: 842

Use the raw version of the file from your repo,

I have this css file from an old Hello World repo, using https://github.com/mcarpenterjr/Hello_World/blob/master/style.css you get the file in the repository.

Using https://raw.githubusercontent.com/mcarpenterjr/Hello_World/master/style.css you get the raw file, which is what you're looking for. To get this simply click the raw button to the upper right of the file contents on a file's page from the repo.

I suppose you could also swap https://github.com for https://raw.githubusercontent.com and drop blob from the address.

Just use this -> https://rawgit.com/

Works flawlessly.

Upvotes: 0

Parker Ziegler
Parker Ziegler

Reputation: 1010

Remember that GitHub repos are different from web hosting services. You are correct that the issue is related to how the .css file is being served (or rather, in your case, not being served at all). There are a few options:

1) Create a gh-pages branch and reference your stylesheet from there i.e. https://natearn.github.io/react-vim-tips/stylesheets/VimTips.css. This should actually serve your CSS properly.

2) Use RawGit to generate a proper CDN link to your VimTips.css file. I gave this a shot and have a working example at this Stackblitz: https://stackblitz.com/edit/react-bcjjdo?file=index.js. Here's the CDN link I used: https://cdn.rawgit.com/natearn/react-vim-tips/32b5ee66/stylesheets/VimTips.css

The crucial point is that either of these strategies will serve your CSS with the correct Content-Type headers, enabling them to actually load as CSS in your page. Referencing the link to downloads from your release simply prompts a download of the binary data for your CSS file, which will not work. Hope this helps you out!

Upvotes: 1

Related Questions