NPM 无法转换 SASS

Question

我正在尝试将我的 style.scss（其中包含一些其他文件 link，例如 _variable.scss、_mixins.scss）文件转换为 css通过 grunt.js 和 npm。但是我得到了这个错误：

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 时，它给了我那些错误。 Compass 已经安装，我输入 "grunt compass" 以确保其运行ning.

有什么想法吗？

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.

NPM 无法转换 SASS

NPM failed to convert SASS

javascript

node.js

gruntjs

compass-sass

grunt-contrib-sass