SASS & Compass Watch Failed Import

Question

I have been struggling with SASS and Compass on my Mac OSX for the last few days.

I have a setup like below (this is as accurate as I can make it).

Ive only done 1 site but there are around 40 with identical structure below proxysite1.com

/Library/WebServer/Documents

/WebProxy-Network
  /Global_Assets
     /_alerts.scss
     /_badges.scss
     /_breadcrumbs.scss
     /_button-groups.scss
     /_buttons.scss
     /_carousel.scss
     /_close.scss
     /_code.scss
     /_dropdowns.scss
     /_forms.scss
     /_grid.scss
     /_labels.scss
     /_print.scss
     /_bootstrap.scss (all the files above import into this one and will use shared by all the sites)
  /Asia
  /USA
  /EU
  /UK
   /www.proxysite1.com
         /scss
            _variables.scss
            _overrides.scss
            styles.scss (this imports _sass-bootstrap.scss, _variables.scss & overrides.scss)
         /css
            styles.css (ok so this should be the FINAL output unique for each site)
         /js
         /images
         /index.inc.php
         /index.php
         /config.rb

Inside my config.rb I have these settings:

# Require any additional compass plugins here.

load "../../Global_Assets/Bootstrap3"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

Now inside my /scss folder file styles.scss

I have the following:

// Site Overrides
@import "overrides";

// Site Variables
@import "variables";

// Bootstrap3 SASS Framework
@import "bootstrap";

Right so that took a while but I want to get some good advice on where i'm going wrong ;)

Now when I visit this path via terminal

/Library/WebServer/Documents/WebProxy-Network/UK/www.proxysite1.com/

and run the command "compass watch" I get the following message:

Ants-MacBook-Pro:www.antproxy.com Ant$ compass watch
>>> Change detected at 10:17:28 to: styles.scss
error scss/styles.scss (Line 24: File to import not found or unreadable: sass-bootstrap. 
Load paths:
/Library/WebServer/Documents/WebProxy-Network/UK/www.antproxy.com/scss
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter)
overwrite css/styles.css 
>>> Compass is watching for changes. Press Ctrl-C to Stop.

So hopefully this is enough info to get some good insight in to where I'm going wrong, hopefully its been clear and I'm on the right path :)

BTW the idea was to have it so I can specify different variables for each site allowing me to change colors fonts etc but share layout styles and functionality styles.

David Smith David Smith · Accepted Answer · 2013-12-12T23:09:47

(I would have posted this as a comment however I do not have the priviledges.)

I suspect that you may have gotten some of your indentations wrong in your post as running "compass watch" in the "www.proxysite1.com" directory while the config.rb file is within "assets" wouldn't work as compass wouldn't be able to find the configuration and would assume that no compass project existed.

Regardless, how are you including Bootstrap 3?

If you are not already using it already, I would recommend trying Thomas McDonald's bootstrap-sass. Available here: https://github.com/thomas-mcdonald/bootstrap-sass

UPDATE:

Why are you including Bootstrap 3 like this?

// Bootstrap3 SASS Framework
@import "sass-bootstrap";

If you have included the correct require statement in your config.rb (inc. below) then you should be able to import it like this mate:

// Bootstrap3 SASS Framework
@import "bootstrap";

Inside of config.rb, you should have this at the top:

# Require any additional compass plugins here.
require 'bootstrap-sass'

load "../../Global_Assets"

SASS & Compass Watch Failed Import

1 Answers