首页 文章

如何使用Sass(或其他工具)合并.CSS文件? [重复]

提问于
浏览
19

这个问题在这里已有答案:

我可以使用Sass使用 @import 将多个.SCSS或.SASS输入文件编译成单个.CSS输出文件,如here所述 .

如果我使用 @import 包含正常的.CSS文件,则它们不会合并 . 输出.CSS文件仍包含 @import 指令 . 那讲得通 .

但有没有办法可以覆盖这种行为,也许是命令行切换到Sass编译器?换句话说,我可以告诉Sass尝试强制合并 @import "foo.css"; ,就好像它是一个.SCSS文件一样吗?

我正在使用带有许多.CSS文件的第三方库(Google Closure Library) . 我宁愿避免手动解决方案,例如将所有这些文件重命名为.SCSS(虽然这似乎有效)或将其内容复制并粘贴到我的.SCSS文件中(也可以) . 而且我真的像Sass一样包含我使用的少量.CSS文件'as is'并生成单个输出样式表 . 可能?我还应该看看其他工具吗?

3 回答

  • 3

    每个CSS文件也是一个有效的SCSS ..所以如果你需要"invisibly"导入或合并到 _filename.scss 然后使用 @import "filename"; (扩展名可选)从主scss文件中导入@import它应该编译成一个没有@import语句的大CSS在里面

    编辑添加:对不起只是在浏览器崩溃后看到你的编辑..并且看到它不是你想要的,我不知道另一种方式

  • 2

    我还没有找到一种方法在Sass中做到这一点 .

    我的解决方法是直接从其URL导入第三方库 . 当然,这仅适用于通过URL提供的CSS库 . 它仍在导入多个文件,但至少我不必重命名文件,也不必管理供应商CSS库的修改后的副本 .

    例:

    // ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
    @import 'my_modified_copy/closure/goog/css/common.scss';
    
    // WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
    @import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';
    

    在发布之前,我可能会添加一个脚本来从供应商处提取当前版本,并将所有.css文件重命名为.scss文件 . 但就目前而言,上述解决方法对于开发来说是可以接受的 .

  • 11

    这可以在服务器端完成,如果这是一个选项,可以省去一些麻烦 . 由于您只是将文件合并在一起,因为它只是CSS,因此信息中不应存在任何会损害您网站的冲突 . 此外,这种方式使您可以灵活地更新CSS,因为框架已得到改进 .

    Ruby不是我选择的语言,但仍然可以完成这里所需的一切 . 有一个用Ruby编写的工具可以用CSS和JS文件为你做这个 . 看一下这篇博客文章,了解破解:http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

    我希望这对你有所帮助,如果你还需要其他任何东西,请告诉我 .

相关问题