empty css while using @import in a css link [duplicate]

Question

My css files are loaded empty I checked in firebug my css file all.css it is recognized and a.css,b.css,c.css are also recognized but the problem that they are empty

all.css

@import url(a.css)  
@import url(b.css)  
@import url(c.css)

In JSF page i am adding all.css

<h:outputStylesheet library="css" name="all.css" />

So how can i add the 3 css without adding them explicitly i want to combine them in one css file

Might want to have a look at this: showcase.omnifaces.org/resourcehandlers/… — Karl Kildén
– Karl Kildén, Commented May 16, 2013 at 15:46
Have you tried code@import url("#{resource['css/font-awesome.css']}");code ? — Jonathas Pacífico
– Jonathas Pacífico, Commented Jun 11, 2013 at 19:23
Probably a path problem as @JonathasPacífico stated, could be easily tested with Firebug — Alexandre Lavoie
– Alexandre Lavoie, Commented Jun 23, 2013 at 22:51

kizanlik · Accepted Answer · 2016-02-13 15:26:07Z

1

I had the same issue today and I solved it as below. May be it helps other people who read this later:

Directory structure:

-WebContent
 -WEB-INF
  -resources
   -css
     a.css
     b.css

b.css:

body { height: 100%; width: 100%; }

a.css

@IMPORT url("#{resource['css:b.css']}");

div { ... }
a   { ... }

: is important. If b.css file was in another folder, default i.e., in the css folder, @IMPORT url would be like this:

@IMPORT url("#{resource['css:default/b.css']}");

Left side of the colon is the library name and the right of the colon is the path for the imported css file.

answered Feb 13, 2016 at 15:26

kizanlik

1753 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BalusC Over a year ago

The : is not important. You misunderstood meaning of "library". Just use / the usual way. stackoverflow.com/questions/11988415/…

metaColin · Accepted Answer · 2013-06-23 20:12:21Z

0

I think to use @import correctly it must be the absolute first thing in your style sheet. Like not even comments can come before the declarations.

Try making a stylesheet which does nothing but calls the @imports.

Also when in doubt, make a JS fiddle for us to look at.

answered Jun 23, 2013 at 20:12

metaColin

1,9712 gold badges22 silver badges38 bronze badges

Collectives™ on Stack Overflow

empty css while using @import in a css link [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related