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.