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

问题描述

我可以使用将多个.SCSS或.SASS输入文件编译为单个.CSS输出文件，使用 @import ，如所述。

如果我使用 @import 包括正常的.CSS文件，它们不会合并。输出.CSS文件仍包含 @import 指令。这是有道理的。

但是有一种方法，我可以重写这个行为，也许一个命令行切换到Sass编译器？换句话说，我可以告诉Sass尝试强制合并 @importfoo.css; 就像是一个.SCSS文件？

我正在使用第三方库（）和许多.CSS文件。我只在我的项目中使用这些。我宁愿避免手动解决方案，如重命名所有这些文件为.SCSS（虽然这似乎工作）或复制和粘贴其内容到我的.SCSS文件（也工作）。我不想将它们全部提供给客户端导入。我真的只是希望Sass包含几个.CSS文件，我用'as is'，并产生一个单一的输出样式表。可能？有没有其他工具我应该看看。

解决方案

我没有找到一种方法在Sass这样做。 p>

我的解决方法是直接从他们的URL导入第三方库。当然，这只适用于通过URL提供的CSS库。它仍然导入多个文件，但至少我不必重命名文件，否则管理供应商的CSS库的修改副本。

示例：

  // ORIGINAL：本地管理，修改副本（坏），输出中没有@import（好）
 @import'my_modified_copy / /goog/css/common.scss'; 
 
 //解决方法：供应商管理（好）：输出中的@import（错误但可接受）
 @import'http://closure-library.googlecode.com/svn/trunk /closure/goog/css/tab.css'; 
 

在发布之前，我可能会添加一个脚本从供应商拉取当前版本， .css文件作为.scss文件。但现在，上述解决方法是可以接受的开发。

I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using @import as described here.

If I use @import to include normal .CSS files, they are not merged. The output .CSS file still contains the @import directives. That makes sense.

But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge @import "foo.css"; just as if it were a .SCSS file?

I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?

解决方案

I haven't found a way to do this in Sass.

My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.

Example:

// 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';

Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.

这篇关于如何使用Sass（或其他工具）合并.CSS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！