пустой css при использовании @import в ссылке css

Question

Мои файлы css загружаются пустым Я проверил в firebug мой css-файл all.css, он распознается, и a.css, b.css, c.css также распознаются, но проблема, что они пустые

all.css

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

в JSF странице я добавляю all.css

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

Так как я могу добавить 3 CSS без добавления их в явном виде я хочу скомбинировать их в одном файле css

Answer 1

Я думаю, что правильно использовать @import, это должно быть абсолютно первым в вашей таблице стилей. Например, даже комментарии не могут появляться перед объявлениями.

Попробуйте создать таблицу стилей, которая ничего не делает, кроме вызовов @imports.

Также, когда вы сомневаетесь, сделайте для нас скрипт JS.

Answer 2

У меня была такая же проблема сегодня, и я решил ее, как показано ниже. Может быть, это помогает другим людям, которые читают это позже: структура

Каталог:

-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 { ... } 

: важен. Если b.css файл был в другой папке, умолчанию т.е. в Css папку, @IMPORT URL будет выглядеть так:

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

Левая сторона толстой кишки является имя библиотеки и право двоеточия - это путь для импортированного файла css.