CODEWITHSUNDEEP
sasscompass-sass
Spencer Carnage
Spencer Carnage

Reputation: 2066

Compass: Importing files from another project directory

I have two projects. One is for the public facing side of our site and the other is for the admin side. I have a page that is the same on both pages.

My directory structure is like so:

/public
  config.rb
  /images
    /upgrade
      /sprites
  /sass
    /upgrade
        index.scss
  /stylesheets

/cms
  config.rb
  /sass
    /upgrade
        index.scss
  /stylesheets

public/sass/upgrade/index.scss is where all of the styles live. cms/sass/upgrade/index.scss imports those styles, like so:

@import '../../../public/sass/upgrade'

These works fine in that I can generate css into cms/stylesheets/upgrade/index.css. It is with the sprite generation that I'm running into a problem. Inside of public/sass/upgrade/index.scss, the import for the sprite pngs looks like this

@import 'upgrade/sprites/*.png';

Using LiveReload, I get the follow error:

Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
No files were found in the load path matching "setup/packages/*.png". Your current load paths are: ./images

That makes sense because when I compile my cms/sass/upgrade/index.scss, its looking for images in cms/images/upgrade/sprites where there are none.

I'm curious to see if anyone has ever run into this issue and has any solutions how to share assets across projects. I thought that setting relative_assets = true would help but it hasn't. Maybe I'm using it wrong. I don't know.

Upvotes: 1

Views: 3163

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

I'm sure that cimmanon's suggestion to create a symbolic link should work. Are you sure you're doing it correctly? To be on the safe side, use an absolute path.

Your project structure is kinda funny, i failed to fully comprehend it, so i can't give you exact symlink placement and target. If you want us to provide you exact paths, please update your question with:

  1. where you place the symlink, where it points to, what errors you have when you attempt to compile;
  2. more detailed project structure (full contents of files involved would be of help).

UPD: make sure your Apache configuration has FollowSymLinks enabled and PHP configuration has all the projects directories in the include_path.

If you give it up, you can use a nasty hack that i have just invented. :D

The idea is to create a custom SASS function that returns different result depending on from what project it is called. This will let importing different paths from public/sass/upgrade/index.scss depending on which project you're compiling.

In public/config.rb, add:

# Assign a name to the project and pass it into SASS
$project_name = "public"
module Sass::Script::Functions
  def project_name
    Sass::Script::String.new($project_name)
  end
end

The addition to cms/config.rb is quite similar. The only difference is $project_name's value:

# Assign a name to the project and pass it into SASS
$project_name = "cms"
module Sass::Script::Functions
  def project_name
    Sass::Script::String.new($project_name)
  end
end

After that, modify the import line in public/sass/upgrade/index.scss:

@if project-name() == public {
  @import 'upgrade/sprites/*.png';
} @else if project-name() == cms {
  @import '../../../public/upgrade/sprites/*.png';
}

The import paths in my example are crooked, please adjust them to match your environment.

UPD2: the @import directives are not allowed inside control directives like @if. So instead you can use:

@if project-name() == public {
  $path: 'upgrade/sprites/*.png';
} @else if project-name() == cms {
  $path: '../../../public/upgrade/sprites/*.png';
}
@import #{$path};

Upvotes: 2

Related Questions