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

jwfearn picture jwfearn · Apr 16, 2011 · Viewed 18.4k times · Source

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

clairesuzy picture clairesuzy · Apr 16, 2011

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