empty css while using @import in a css link

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: http://showcase.omnifaces.org/resourcehandlers/CombinedResourceHandler;jsessionid=nlGOQOjJmihdBZL41BQQs+Z5 — Karl Kildén, May 16 '13 at 15:46
Have you tried `code`@import url("#{resource['css/font-awesome.css']}");`code` ? — Jonathas Pacífico, Jun 11 '13 at 19:23
Probably a path problem as @JonathasPacífico stated, could be easily tested with Firebug — Alexandre Lavoie, Jun 23 '13 at 22:51

score 1 · Answer 1 · answered Feb 13 '16 at 15:26

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.

The `:` is not important. You misunderstood meaning of "library". Just use `/` the usual way. http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used — BalusC, Feb 14 '16 at 09:32

score 0 · Answer 2 · answered Jun 23 '13 at 20:12

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.

empty css while using @import in a css link

2 Answers2