CSS import not working on github pages

CSS import not working on github pages
0

#1

Hi

Trying to host my weather app on GitHub pages. It was working fine until I rearranged the CSS, using CSS import to link certain parts to the main style sheet. They now do not work though and I’m confused as to why considering they run fine on my local server. How can I get the CSS to show again?

Thanks


#2

The issue isn’t fixed btw, my last commit is my attempt at fixing it which failed.


#3

In your styles.css file, you have:

@import "CSS_modules/_background.css";
@import "CSS_modules/_temp-slider.css";
@import "CSS_modules/_container.css";

I get a 404 error, when I try to access the first one above which would be:

https://kubix90.github.io/weather-app/public/CSS_modules/_background.css


#4

Yeah I know it’s not linking correctly, but I don’t get why and how to solve it. I use the same technique on one of my other projects on GitHub and it works fine. It also works fine on my local server. I’ve tried the below, but it still doesn’t work for some reason.

@import url("CSS_modules/_background.css");
@import url("CSS_modules/_temp-slider.css");
@import url("CSS_modules/_container.css");

#5

What is the other project? I can take a look at that code and compare the two.


#6

Thanks, see below

Looking at it again, I’m wondering if its possibly to do with the fact I’m using an NPM package in this one that’s processing the CSS differently.


#7

On the travel site, which css file uses the @import syntax? I was not able to quickly find one.


#8

Apologies.


#9

I think the other one works because the files are bundled by webpack


#10

I forked your weather app and tried removing the underscores in front of the CSS module names. For some reason GH pages can’t see them if there’s an underscore.


#12

Jekyll, the application that is used for GH pages, is designed to ignore underscore-prefixed files (following the convention in many languages thay you’re indicating you want that file ignored by the compiler). Underscores are commonly used for Sass imports, where all the different imported Sass gets compiled to a single CSS file: those files are to be ignored because they never appear as separate files. (Side issue, but CSS @imports are utra bad for performance, avoid them if at all possible)


#13

Yeah, I think I was overthinking things by doing it this way, thinking that its sometimes done with large scale, complex web apps, but this is nothing of the sort. It’s just a simple weather app, so I’ve decided to ditch it and just show it all in one file, making it as easy to read as possible. Thanks for the help though everyone.

The working link to the app is below for anyone that’s interested in taking a look, any suggestions for improvements are welcome. The transition effect when I click other cities doesn’t seem to work in GitHub pages, but again, works fine on my local server. Don’t know whether that’s Jekyll reacting oddly with the app again or what.

https://kubix90.github.io/weather-app/