javascript - Grunt Sass 错误 : File to import not found or unreadable

Question

这在本地有效，但是当我在 ubuntu 上发出咕噜声时，我收到了这个 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']);
}

我怎样才能开始调试这个？我的 public/libs/中的所有文件都存在，因此它必须是一个与查找文件无关的编译问题？我安装了 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 导入路径。根据documentation您只需提供 .scss 文件和 .css 文件的路径即可进行编译，并在主 SASS 文件中定义导入路径。

例如:

在你的 style.scss 中假设你的目录结构是

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

      ...ect

您的 style.scss 文件中会有类似的内容

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

你的 grunt 文件就像这样

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