Grunt Sass错误:找不到要导入的文件或不可读

Question

这在本地工作，但是当我在我的ubuntu上发出grunt时，我得到这个sass错误。我已经安装了ruby和sass，还有grunt

Running "sass:dist" (sass) task
Error: File to import not found or unreadable: /public/libs/bootswatch-scss/cyborg/variables.
       Load path: /opt/app/soundapp/public/style/sass
        on line 1 of public/style/sass/style.scss
  Use --trace for backtrace.
File "public/builds/style.css" created.

如错误所示，我使用grunt来运行我的东西。这是我的style.scss的顶部

@import "public/libs/bootswatch-scss/cyborg/variables";
@import "public/libs/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "public/libs/bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "public/libs/bootswatch-scss/cyborg/bootswatch";

这是我的grunt文件

module.exports = function(grunt){
    jsFiles = [
        'public/libs/underscore/underscore.js',
        'public/libs/jquery/dist/jquery.js',
        'public/libs/jquery-ui/jquery-ui.js',
        'public/libs/jquery-ui/ui/core.js',
        'public/libs/jquery-ui/ui/widget.js',
        'public/libs/angular/angular.js',
        'public/libs/angular-animate/angular-animate.js',
        'public/libs/angular-sanitize/angular-sanitize.js',
        'public/libs/angular-bootstrap/ui-bootstrap-tpls.js',
        'public/libs/angular-ui-router/release/angular-ui-router.js',
        'public/libs/restangular/dist/restangular.js',
        'public/js/services/**/*.js',
        'public/js/filters/**/*.js',
        'public/js/directives/**/*.js'
    ],
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                options: {
                    loadPath: [
                        'public/libs/bootstrap-sass-official/assets/stylesheets/',
                        'public/libs/bootstrap-sass-official/assets/stylesheets/bootstrap/',
                        'public/libs/font-awesome/scss',
                        'public/libs/bootswatch-scss/cyborg/'
                    ],
                    style: 'compressed'
                },
                files: {
                    'public/builds/style.css': 'public/style/sass/style.scss'
                }
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
            },
            build: {
                src: 'builds/script.js',
                dest: 'builds/script.min.js'
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        },
        concat: {
            options: {
                separator: ';',
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
            },
            dist: {
                src: jsFiles,
                dest: 'public/builds/script.js'
            }
        },
        jshint: {
            all: ['public/js/**/*.js']
        },
        notify_hooks: {
            options: {
                enabled: true,
                max_jshint_notifications: 5
            }
        },
        notify: {
            complete: {
                options: {
                    message: 'Grunt Completed!'
                }
            },
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-notify');
    grunt.registerTask('default',['jshint', 'sass', 'concat', 'notify:complete']);
}

我如何开始调试这个?所有的文件在我的公共/lib/存在，所以它必须是一个编译问题不相关的它找到的文件?我已经安装了Sass 3.4.13和ruby 1.9.3p484

Answer 1

此语法似乎来自较旧的版本，可能仍然不支持或不兼容，

sass: {
    dist: {
       options: {
           loadPath: [ ],
           style: 'compressed'
       },
       files: { }
    }
},

但是对于grunt-contrib-sass v0.9.2

如果您将所有sass文件导入到一个主sass文件中。您不应该在grunt文件中定义所有的SASS导入路径。根据文档，您可以通过提供.scss文件和.css文件的路径来编译，并在主SASS文件中定义导入路径。

例如

:

在你的风格。假设目录结构为

|--- style.scss
|--- public
      |--- libs
         |--- bootswatch-scss
      ...ect

你会在你的风格中有这样的东西。scss文件

@import "public/libs/bootswatch-scss/cyborg/variables";
@import "public/libs/bootswatch-scss/cyborg/bootswatch";

和繁琐的文件就像

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'public/builds/style.css': 'public/style/sass/style.scss'
      }
    }
  }
});