NPM未能SASS

Question

转换我想将我style.scss（其中有一些其他的文件链接到它如_variable.scss，_mixins.scss）通过grunt.js和NPM文件的CSS。不过，我得到这个错误：

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 

这里是我的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']); 
}; 

当我运行grunt sass，它给了我的错误。 指南针已经安装好了，我输入“grunt compass”来确认它正在运行。

有什么想法？

Answer 1

使用grunt-contrib-sass而不是grunt-sass。

• grunt-contrib-sass支持指南针的ruby编译器。

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.

还要确保compass选项true。默认情况下，它被设置为false。

阅读本的详细资料：compass option

下面是一个例子：

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

• grunt-sass使用libsass这是在C++中的Sass编译器不支持指南针。

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.