如何使用Ant将外部CSS @import文件中的CSS文件合并

Question

我应该如何使用Ant来拼接外部CSS文件中使用 @import 指定的一系列CSS文件呢?

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

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

我希望Ant可以加载和合并CSS中指定的所有文件到一个单独的文件中。这是否可能？

- Pelle

Answer 1

你可以使用Ant的loadfile任务，然后接着使用concat来完成此操作。

这是一个示例，如果你的包含导入语句的css文件只包含每行一个导入语句，则linecontainsregexp可能是可选的。（如果该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>

- martin clayton

---

工作得非常好。万分感谢！您还解决了另一个“不可能”的问题；当连接文件列表（即真实文件）时，似乎不遵守顺序。将文件列表作为逗号分隔的属性变量放置是聪明的做法。 - Pelle