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

ε祈祈猫儿з 提交于 2019-12-11 10:39:02

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!