Css file not implemented


#1

I was tidying up my css files and put some css styles into a new css file, but when I restarted meteor, the new styles were not being implemented. I copied them back into an existing css file which worked.

If I use !important in the new file, then it works fine but I know this isn’t correct so how do I order the way styles are applied.


#2

if ur having problem with the order of how the files are loading (merged in this css case) give them an alfabetical order or numbering order, something like

_1bar.css
_0foo.css

In this case the _0foo.css is going to loaded first


#3

I am not sure the problem is the order of loading - the css was very simple just defining a color: i.e.

.blue{color:blue;}

it works in an existing file, but only in a new file with !important.


#4

can we see the 2 code files?


#5

I suspect that @narven is correct

0foo.css

 .color{color: red;}

1bar.css

 .color{color: blue;}

html

<p class="color"> will this text be colored blue or red?</p>
<p>The answer is: blue</p>

however, 0foo.css

 .color{color: red !important;}

html

<p>The answer is: red</p>

#6

Sorry Garrilla, if I had used .color{color: red;} then I would agree - but I was using .blue{color:blue;} so that when used in HTML

it should color the font blue. It works but only if I use an existing css file and not a new one.


#7

I’m sorry but the color you used is irrelevant - I used different colours to demonstrate the effects of load order and the !important keyword

use an inspector to see what is styling the element

/i’m-out