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

问题描述

目前，该 H5BP Ant构建脚本（线817）以style.css文件，并指定内联那里进口。不过，我想有此功能的多个样式表。我现在的目录结构是这样的：

  CSS /
    h5bp /
        h5bp.normalize.css
        h5bp.helper.classes.css
        h5bp.media.queries.css
        h5bp.print.css
    页/
        home.page.styles.css
        about.page.styles.css
        upload.page.styles.css
        download.page.styles.css
        ...
    演员/
        ie.styles.css
        layout.styles.css
        font.styles.css
        ...
 

我希望能够运行的CSS Ant目标在 CSS /页/ 目录中的每个文件，使得每个样式表内联进口，然后是精缩。请问目前H5BP构建脚本支持此功能？如果没有，我怎么会修改它适合我的需要？一个例子样式看起来像这样...

  @import URL（../ h5bp / h5bp.normalize.css）;
@import的url（../演员/ ie.styles.css）;
@import的url（../演员/ layout.styles.css）;/ *这个样式表是具体的主页* /
@import URL（home.page.styles.css）;@import的url（../演员/ font.styles.css）;
@import的url（../ h5bp / h5bp.helper.classes.css）;
@import的url（../ h5bp / h5bp.media.queries.css）;
@import的url（../ h5bp / h5bp.print.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
        ...

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.

However, the node build script should be able to do this for you.

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