How to merge .CSS files with Sass (or other tool)? [duplicate]

Question

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?

Answer 1

every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then @import from the main scss file using @import "filename"; (extension optional) it should compile to one big CSS with no @import statements inside it

edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way

Answer 2

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.