Why I can not load CSS into my Github hosted site?
Question
I am making a static site in Github, but when I try to load the site, the CSS page is not loading up. I looked up many solutions like these - CSS not loading for GitHub pages & How to link my CSS to my HTML in a github hosted site
And found out that here CSS is not implicitly linked with HTML, rather CSS is stored in Github as HTML type copy, and to get CSS correct, we need to get CSS implemented correctly. That is why we can use {{site.github.url}}, or maybe give <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css"> , things like that. But my question is how I can implement it and do my work done? Here are my code and link to the Github site -
<head>
<meta charset="utf-8">
<title>To-do list app</title>
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-app-css/index.css">
</head>
link - https://github.com/iamdeb28/OpenClassRoom_Project_8
Github Static Site - https://iamdeb28.github.io/OpenClassRoom_Project_8/
Well, one thing that I want to mention is that when I loaded chrome dev tools and inspected the sources tab, I found index.css and base.css file totally empty, and when I inputted the code, it just works fine. But when I refresh, same thing happens. I am pretty new to JS and Git, if you can please help. Can anyone please help???
Edit: Here is a screenshot that proves that internally, the CSS is empty and contains nothing.
2 answers
solution1
0 2020-09-08 05:53:59
As @Senatrius said, the main problem was the node_modules folder, and also the .gitignore file. Previously I was not looking at this .gitignore , but as name suggests, it is just ignoring the files, I want to show (it has the files names and paths with a '!' sign). Also, don't know why node_modules folder name is just not working out, so I copied my files to the root directory and everything seems okay. Thanks @Senatrius.
solution2
-2 2020-09-07 19:41:17
You have to link the stylesheets from the directory where your HTML file is. THis is your solution. Thanks.
<link rel="stylesheet" href="./node_modules/todomvc-common/base.css"> <link rel="stylesheet" href="./node_modules/todomvc-app-css/index.css">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.