With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS output file. What about the regular CSS files? According to this documentation all files with .css extension, it will be compiled to a CSS @import rule.
For example, if style.scss contains:
This is not what we want if we are aiming to utilize the minify and merge features of SASS and Compass. Some will rename the .css fileextension to .scss as workaround. But if we are using a package manager like Bower, renaming the file extension is strongly not recommended. This article will show solution to this issue:
In your project folder, create mylib.rb file and copy the following codes in this file:
require "sass/importers"
class Sass::Importers::Filesystem
alias :css_importer :extensions
def extensions
css_importer.merge('css' => :scss)
end
end
Now we can import regular CSS file(s) in our SASS files. Example if we want to import ../../bower_components/animate.css/animate.css we will write it in SASS file without the .css extension:
Thanks for the useful tips Anish. Keep posting. I can always recommend CodeHints.
Thankyou joel for your support.