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

时间:2015-05-21 18:56:56

标签: javascript sass gruntjs

这在本地工作但是当我在我的ubuntu上咕噜咕噜时,我得到了这个错误。我安装了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";

这是我的咕噜文件

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

1 个答案:

答案 0 :(得分:1)

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

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

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

如果要将所有sass文件导入一个主SASS文件。您不应该在grunt文件中定义所有 SASS导入路径。根据{{​​3}},您可以通过提供.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'
      }
    }
  }
});