CODEWITHSUNDEEP
javascriptsassgruntjs
Garuuk
Garuuk

Reputation: 2244

Grunt Sass Error: File to import not found or unreadable

This works locally but when I grunt on my ubuntu I get this sass error. I have ruby and sass installed, grunt as well

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.

As the error shows I use grunt to run my stuff. Here's the top of my 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";

Here is my grunt file

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']);
}

How can I begin to debug this? All the files in my public/libs/ exist so it has to be a compiling issue not related to it finding the files? I have Sass 3.4.13 and ruby 1.9.3p484 installed

Upvotes: 2

Views: 4788

Answers (1)

khollenbeck
khollenbeck

Reputation: 16157

This syntax appears to be from an older version and may not still be supported or compatible,

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

but for grunt-contrib-sass v0.9.2

If you are importing all of your sass files into one main SASS file. You shouldn't have to define all of the SASS import paths in your grunt file. According to the documentation you could compile by just providing the path to your .scss file and you .css file and define the import paths in your main SASS file.

For example:

in your style.scss assuming your directory structure is

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

      ...ect

you would have something like this in your style.scss file

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

and your grunt file like so

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

Upvotes: 2

Related Questions