如何使用Ant从外部CSS @import文件连接CSS文件

Question

我如何使用Ant连接CSS文件列表，在一个外部CSS文件中指定@imports?

指定 CSS文件和文件顺序的CSS文件如下所示:

 @import url('header.css');
 @import url('footer.css');
 @import url('module/module1.css');
 @import url('module/module2.css');

我希望Ant加载并连接css中指定的所有文件到一个文件中。这可能吗?

Answer 1

您可以使用Ant loadfile任务，然后是concat。

这里有一个例子，linecontainsregexp可能是可选的，如果你的css文件的import语句只包含import语句，每行一个。(如果该css文件更复杂，则需要对下面的文件进行细化。)

<loadfile property="master.css" srcfile="master.css">
    <filterchain>
        <linecontainsregexp>
            <regexp pattern="@import url" />
        </linecontainsregexp>
        <replaceregex pattern=".*'(.*)'.*" replace="1," />
        <striplinebreaks/>
    </filterchain>
</loadfile>

结果是一个属性，其中包含所需顺序的以逗号分隔的css文件列表。然后可以使用Ant filelist在连接中指定它们:

<concat destfile="all.css">
    <filelist files="${master.css}" />
</concat>