HTML5 样板:是否可以使用构建脚本为多个样式表内联 @import? [英] HTML5 Boilerplate: is it possible to inline @import for multiple stylesheets with the build script?

问题描述

目前，H5BP ant 构建脚本(第 817 行)采用style.css"并内联在那里指定的导入.但是，我希望为多个样式表提供此功能.我现在的目录结构是这样的:

Currently, the H5BP ant build script (line 817) takes "style.css" and inlines the imports specified there. However, I'd like to have this functionality for multiple stylesheets. My current directory structure is like this:

css/
    h5bp/
        h5bp.normalize.css
        h5bp.helper.classes.css
        h5bp.media.queries.css
        h5bp.print.css
    pages/
        home.page.styles.css
        about.page.styles.css
        upload.page.styles.css
        download.page.styles.css
        ...
    extras/
        ie.styles.css
        layout.styles.css
        font.styles.css
        ...

我希望能够为 css/pages/ 目录中的每个文件运行 css ant 目标，以便每个样式表都内联导入，然后缩小.当前的 H5BP 构建脚本是否支持此功能?如果没有，我将如何修改它以满足我的需求?示例样式表如下所示...

I'd like to be able to run the css ant target for each file in the css/pages/ directory such that each stylesheet has the imports inlined and then is minified. Does the current H5BP build script support this functionality? If not, how would I modify it to fit my needs? An example stylesheet looks like this...

@import url(../h5bp/h5bp.normalize.css);
@import url(../extras/ie.styles.css);
@import url(../extras/layout.styles.css);

/* this stylesheet is specific for the "home page" */
@import url(home.page.styles.css);

@import url(../extras/font.styles.css);
@import url(../h5bp/h5bp.helper.classes.css);
@import url(../h5bp/h5bp.media.queries.css);
@import url(../h5bp/h5bp.print.css);

推荐答案

我们只建议使用单个样式表，因为这适用于大多数常见用例.因此，我们没有任何东西可以允许您要求这种行为.

We only recommend having a single stylesheet as this would be appropriate for most common use cases. Hence we do not have anything that would allow this kind of behaviour that you require.

但是，节点构建脚本应该能够为您做到这一点.

这篇关于HTML5 样板:是否可以使用构建脚本为多个样式表内联 @import?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！