import not found or unreadable: breakpoint

Question

Just installed breakpoint and tried using on an existing blog project (html/css/js/php). Currently using Sass with Susy for basic grid stuff but wanted to give Breakpoint a try on this project as I recently became aware of it's ease and flexible use.

After install was successful added the following to my project:

require 'breakpoint' to config.rb file

@import "breakpoint" to _base file in sass.

Upon refresh was given this error message in the browser:

Syntax error: File to import not found or unreadable: breakpoint.\A Load paths:\A /Users/pbj/Desktop/code/the-start/themes/thestart/sass\A /Library/Ruby/Gems/2.0.0/gems/compass-0.12.3/frameworks/blueprint/stylesheets\A /Library/Ruby/Gems/2.0.0/gems/compass-0.12.3/frameworks/compass/stylesheets\A /Library/Ruby/Gems/2.0.0/gems/susy-1.0.9/sass\A Compass::SpriteImporter\A on line 6 of /Users/pbj/Desktop/code/the-start/themes/thestart/sass/_base.scss\A from line 5 of /Users/pbj/Desktop/code/the-start/themes/thestart/sass/screen.scss\A \A 1: /Users/pbj/Desktop/code/the-start/themes/thestart/sass/screen.scss"

Also had this error in the command line:

Errno::EACCES on line ["1143"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb: Permission denied - /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.17/stylesheets/.listen_test Run with --trace to see the full backtrace

Upon running a full backtrace I was given this in the command line:

Errno::EACCES on line ["1143"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb: Permission denied - /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.17/stylesheets/.listen_test /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:1143:in open' /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:1143:inrescue in block in touch' /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:1139:in block in touch' /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:1137:ineach' /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:1137:in touch' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:221:inworks?' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:182:in block in usable_and_works?' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:182:ineach' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:182:in all?' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:182:inusable_and_works?' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:49:in block in select_and_initialize' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:47:ineach' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/adapter.rb:47:in select_and_initialize' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/listener.rb:272:ininitialize_adapter' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/listener.rb:264:in setup' /Library/Ruby/Gems/2.0.0/gems/listen-1.1.6/lib/listen/listener.rb:64:instart!' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/watcher/project_watcher.rb:31:in watch!' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/commands/watch_project.rb:48:inperform' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/commands/base.rb:18:in execute' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/commands/project_base.rb:19:inexecute' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/exec/sub_command_ui.rb:43:in perform!' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/exec/sub_command_ui.rb:15:inrun!' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/bin/compass:30:in block in <top (required)>' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/bin/compass:44:incall' /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/bin/compass:44:in <top (required)>' /usr/bin/compass:23:inload' /usr/bin/compass:23:in `'

When I installed breakpoint it also installed:

• sass-3.3.0.rc.6
• compass-1.0.0.alpha.18
• breakpoint-2.4.1

When I checked current version of sass it was sass-3.3.0.rc.6.

Not sure exactly whats happening. I did read similar issues where the resolution was to call compass watch on the parent directory of the config.rb file, or something to that extent. Still ended up with same error.

EDIT: When commenting out breakpoint to try and move forward without using (momentarily) this error is throw in the browser:

"Syntax error: Undefined variable: \"$experimental-support-for-mozilla\".\A on line 25 of /Library/Ruby/Gems/2.0.0/gems/susy-1.0.9/sass/susy/_support.scss\A from line 5 of /Library/Ruby/Gems/2.0.0/gems/susy-1.0.9/sass/_susy.scss\A from line 5 of /Users/pbj/Desktop/code/the-start/themes/thestart/sass/_base.scss\A from line 5 of /Users/pbj/Desktop/code/the-start/themes/thestart/sass/screen.scss"

And this error in the command line: Errno::EACCES on line ["1143"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb: Permission denied - /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.17/stylesheets/.listen_test

Figured this is because its trying to use v3.3?

Any one have some advice on how to resolve the issue?

Currently running 15" MBPr OSX v.10.9.2 (Mavericks)

Answer 1

The answer to your woes is Bundler! Bundler will lock your project into specific gems and ensure they're available for use. If you are using Susy 1.x and want to use Breakpoint, your Gemfile should look like the following:

source 'http://rubygems.org' gem 'sass', '~>3.2.0' gem 'compass', '~>0.12.0' gem 'susy', '~>1.0.0' gem 'breakpoint', '~>2.0.0'

If, however, you would like to use the latest and greatest, your Gemfile should look like the following:

source 'http://rubygems.org' gem 'sass', '~>3.3.0.rc.3' gem 'compass', '~>1.0.0.alpha.18' gem 'susy', '~>2.0.0.rc.2' gem 'breakpoint', '~>2.4.0'

Remember to bundle install and run your Compass compiling through bundle exec (bundle exec compass watch)

Answer 2

I had the same problem when install breakpoint via npm, and I fix it by npm install breakpoint-sass, then I import it in my app.scss like this @import '~/node_modules/breakpoint-sass/stylesheets/breakpoint';

use this code for responsive layout :

.class-name {

    **@include breakpoint(max-width 800px) {
     ...
    }**

}