Search code examples
sasscompass-sasscompass

Compass can't find my images for creating sprites

in Gruntfile.js:

compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    httpImagesPath: '../images',
    httpGeneratedImagesPath: '../images/generated',
    httpFontsPath: '/styles/fonts',
    spriteLoadPath: '<%= yeoman.app %>/styles/sprites/',
    relativeAssets: true,
    assetCacheBuster: false
  },
  dist: {
    options: {
      generatedImagesDir: '<%= yeoman.dist %>/images/generated'
    }
  },
  server: {
    options: {
      debugInfo: false
    }
  }
},

This is task:

 compass: {
              files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
              tasks: ['compass:server', 'autoprefixer']
              },

When I run my grunt tasks, get this error:

error app/styles/main.scss (Line 9: No files were found in the load path matching "app/styles/sprites/icons/*.png". Your current load paths are: app/styles/sprites/, /Volumes/myuser/Documents/Projects/mysite/app/images)

main.scss line 9:

@import "app/styles/sprites/icons/*.png";

Why doesn't Compass find any images?

Solution

  • Just change your import to 

    @import "icons/*.png";

    Your current load paths (in compass) is already pointed to: app/styles/sprites/