1

I have installed Breakpoint using Bundler as they suggest, included require "breakpoint" in my config.rb and included breakpoint in my main.scss file after compass.

I am getting the following error when I run grunt to compile everything:

error app/styles/main.scss (Line 5: File to import not found or unreadable: breakpoint.
Load paths:
    /Users/craigmdennis/Sites/craigmdennis.com/app/styles
    /Users/craigmdennis/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets
    /Users/craigmdennis/Sites/craigmdennis.com/app/bower_components
    Compass::SpriteImporter)

So grunt can't find the specified file while leads me to believe it may not be installed correctly. It appears to be very similar to this issue: Sass Breakpoint causing Grunt error

I have tried installing another gem with Bundler and grunt fails to find that file too; ending up with the same error.

This is the output when I run bundle:

Using sass (3.3.4)
Using chunky_png (1.3.0)
Using multi_json (1.9.2)
Using compass-core (1.0.0.alpha.19)
Using compass-import-once (1.0.4)
Using json (1.8.1)
Using rb-fsevent (0.9.4)
Using ffi (1.9.3)
Using rb-inotify (0.9.3)
Using rb-kqueue (0.2.2)
Using listen (1.1.6)
Using compass (1.0.0.alpha.19)
Using sassy-maps (0.3.2)
Using breakpoint (2.4.2)
Using bundler (1.5.3)
Your bundle is complete!

This indicates that the project is set to use the latest version of SASS as well as Compass version 1.0.0.alpha.19 which is above 13 required by Breakpoint.

Here is my Gemfile:

source 'https://rubygems.org';

gem "sass", "~>3.3.4";
gem "breakpoint", "~>2.4.0";

Here is my config.rb file:

require 'breakpoint';

Here is my main.scss file:

// Include Compass
@import "compass";

// Include Breakpoint
@import "breakpoint";

Here is the relevant part of my Gruntfile:

// Compiles Sass to CSS and generates necessary files if requested
    compass: {
        options: {
            sassDir: '<%= config.app %>/styles',
            cssDir: '.tmp/styles',
            generatedImagesDir: '.tmp/images/generated',
            imagesDir: '<%= config.app %>/images',
            javascriptsDir: '<%= config.app %>/scripts',
            fontsDir: '<%= config.app %>/styles/fonts',
            importPath: '<%= config.app %>/bower_components',
            httpImagesPath: '/images',
            httpGeneratedImagesPath: '/images/generated',
            httpFontsPath: '/styles/fonts',
            relativeAssets: false,
            assetCacheBuster: false
        },
        dist: {
            options: {
                generatedImagesDir: '<%= config.dist %>/images/generated'
            }
        },
        server: {
            options: {
                debugInfo: true
            }
        }
    },

Does anyone have any ideas what could be happening? Or what I could do to further narrow down the cause?

Community
  • 1
  • 1
Craig
  • 972
  • 3
  • 13
  • 38

1 Answers1

2

You've got two issues going on. Firs issue is that your Compass Grunt options aren't pointing to your config.rb file, so Compass doesn't know to what to require. Grunt Contrib Compass has the ability to define what requires you want via the require option. The second issue is you haven't enabled the bundleExec option in Compass, which is needed if you want to run through Bundler. So, you should add the following to compass.options (assuming you don't want to read from your config.rb file:

bundleExec: true, require: ['breakpoint']

Snugug
  • 2,358
  • 1
  • 16
  • 18