NPM无法转换SASS

Question

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?

Answer 1

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

• grunt-contrib-sass ruby compiler that support compass.

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'
            }
        }
    },

• grunt-sass uses libsass which is a Sass compiler in C++ that doesn't support compass.

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.