javascriptnode.jsgruntjscompass-sassgrunt-contrib-sass

NPM failed to convert SASS

I am trying to convert my style.scss (which has some other files link to it such as _variable.scss, _mixins.scss) file to css via grunt.js and npm. however I got this error:

Error: File to import not found or unreadable: compass.
        on line 5 of sass/style.scss

1: // typorgraphy
2: @import "base/typography";
3: 
4: // compass
5: @import "compass";
6: 
7: // import files
8: @import "base/import";
9: 
10: // mixins

Here's my gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    compass: {      
    dist: {        
      options: {      
        sassDir: 'sass',
        cssDir: 'css',
        environment: 'production'
      }
    },
    dev: {              
      options: {
        sassDir: 'sass',
        cssDir: 'css'
      }
    }
  },

    watch: {
        sass:{
            files: ['sass/*.scss'],
            tasks: ['sass', 'cssmin']
        }
    },

    sass: {
        dist: {
            files: {
                'css/style.css' : 'sass/style.scss'
            }
        }
    },

    concat: {
        options: {
            separator: ';',
            stripBanners: true,
             banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },

        dist: {
            src: ['js/*.js'],
            dest: 'js/main.min.js'
        }
    },


    uglify:{
        options: {
            manage: false,
            preserveComments: 'all' //preserve all comments on JS files
        },
        my_target:{
            files: {
                'js/main.min.js' : ['js/*.js']
            }
        }
    },


    cssmin:{
        my_target:{
            files: [{
                expand: true,
                cwd: 'css/',
                src: ['*.css', '!*.min.css'],
                dest: 'css/',
                ext: '.min.css'

            }]
        }
    }

  });

  // Load the plugin that provides the "compass" task.
  grunt.loadNpmTasks('grunt-contrib-compass');

     // Load the plugin that provides the "watch" task.
  grunt.loadNpmTasks('grunt-contrib-watch');

     // Load the plugin that provides the "sass" task.
  grunt.loadNpmTasks('grunt-contrib-sass');

    // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

      // Load the plugin that provides the "concat" task.
  grunt.loadNpmTasks('grunt-contrib-concat');

   // Load the plugin that provides the "cssmin" task.
  grunt.loadNpmTasks('grunt-contrib-cssmin');

   // Default task(s).
  grunt.registerTask('default', ['uglify','cssmin']);
};

When I run grunt sass, it gave me those error. Compass was already installed and I type "grunt compass" to make sure its running.

Any idea?

Solution

  • use grunt-contrib-sass instead of grunt-sass.

    This task requires you to have Ruby and Sass installed. If you're on OS X or Linux you probably already have Ruby installed; test with ruby -v in your terminal. When you've confirmed you have Ruby installed, run gem install sass to install Sass.

    Also make sure to compass option to true. By default, it's set to false.

    Read this for more information : compass option

    Here is an example :

    sass: {
        dist: {
            options: {                 
                compass: true,
            },
            files: {
                'css/style.css' : 'sass/style.scss'
            }
        }
    },

    This task uses libsass which is a Sass compiler in C++. In contrast to the original Ruby compiler, this one is much faster, but is missing some features, though improving quickly. It also doesn't support Compass. Check out grunt-contrib-sass if you prefer something more stable, but slower.