Compile imported regular CSS file in SCSS file to SASS @import rule

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:

@import "../../bower_components/animate.css/animate.css";

... it will be compiled to:

@import url(../../bower_components/animate.css/animate.css);

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 file extension 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:

  1. 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)
  2. 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:

    @import "../../bower_components/animate.css/animate";
  3. To use our custom ruby library with compass command line, execute:

    compass compile assets/sass/style.scss -r ./mylib.rb
  4. If you are using grunt, you can use the following codes as reference for your gruntfile.js:

    module.exports = function (grunt) {
        compass: {
          prod: {
            options: {
              config: 'config.rb',
              require: './mylib',
              environment: 'production',
              sourcemap: true
            } // options
          }, // prod
          dev: {
            options: {
              config: 'config.rb',
              require: './mylib',
              sourcemap: true
            } // options
          } // dev
        }, // compass
        watch: {
          sass: {
            files: [
            tasks: ['compass:dev']
          } // sass
        } // watch
      }); // initConfig
      grunt.registerTask('default', 'watch');
      grunt.registerTask('prod', ['compass:prod']);
    } // exports

There's discussion going on sass/sass#193 about this issue, but as of this writing there's still no simple way to accomplish this. There's a solution mentioned but it is not working .

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.