如何使用Sass(或其他工具)合并.CSS文件？

Question

我可以使用萨斯使用编译多个.SCSS或.SASS输入文件到一个单一的.CSS输出文件@import所描述这里.

如果我@import用来包含普通的.CSS文件,它们就不会被合并.输出.CSS文件仍包含@import指令.那讲得通.

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

我正在使用带有许多.CSS文件的第三方库(Google Closure Library).我在我的项目中只使用了其中一些.我宁愿避免使用手动解决方案,例如将所有这些文件重命名为.SCSS(虽然这似乎有效)或将其内容复制并粘贴到我的.SCSS文件中(也可以).而且我不想将它们全部提供给客户端进口.我真的很喜欢Sass包含我使用'原样'的几个.CSS文件并生成单个输出样式表.可能？我还应该看看其他工具吗？

Answer 1

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

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

Answer 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 文件。但就目前而言，上述解决方法对于开发来说是可以接受的。