HTML5 Boilerplate: is it possible to inline @import for multiple stylesheets with the build script?

问题

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);

回答1:

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.

来源：https://stackoverflow.com/questions/10804847/html5-boilerplate-is-it-possible-to-inline-import-for-multiple-stylesheets-wit

标签

css

ant

build

import

html5boilerplate