SASS, Rails 3.1: Loading stylesheets in vendor/assets

I'm using SASS to load stylesheets in a Rails 3.1(sass-rails 3.1) app. For example, sass partials in app/assets/stylesheets are loaded using @import in application.sass -

 @import "pages/common"
 @import "pages/**/*"
 @import "jquery-ui.css"

Now, I also want to load vendor/assets开发者_如何学JAVA/stylesheets. Note that I'm not using require vendor, as @import pages/* seems to be the sass recommended way of doing it. Files here will be css, and not sass or scss. I cannot use @import ../../../vendor/assets/stylesheets/* as it works only for sass and scss files.

Is there any way of doing this ?

Update

What I have now is this.

application.css.scss

//= require_tree .
//= require vendor
//= require_self

This includes all the sass partials mentioned above. The require vendor in

vendor/assets/stylesheets/vendor.css looks like

//= require_tree .

A caveat of this approach is that sass mixins(user defined & plugins) and common variables are not available in all partials. What I have now is a _common_imports.sass which I @import first thing in all partials.

common_imports.sass

@import "colors"
@import "compass/css3/gradient"
@import "compass/css3/border-radius"
@import "compass/css3/box-shadow"

Importing common_imports in all partials feels very repetitive.

If I'm understanding you correctly, I think this might help.

Add the following to config/application.rb, inside the class Application < Rails::Application block:

config.sass.load_paths << File.expand_path('../../lib/assets/stylesheets/')
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')

I've just added the above to an app, and the following directives are now both working:

• Import Sass:
  @import 'grid' in app/assets/stylesheets/application.css.scss finds the file vendor/assets/stylesheets/_grid.scss;
• Import regular CSS:
  @import 'background', again in application.css.scss, finds vendor/assets/stylesheets/background.css.

Does that help? Sorry if I've misunderstood the problem!

Note that you'll need to restart rails if you created any new vendor/* directories (e.g. vendor/stylesheets). If you're seeing this in Rails 3.2 or later, this is probably the most likely culprit.

Try changing the extension to .scss for your vendor stylesheet.

Once I did this, SASS was able to find the required import.

You can use bellow path in order to load assets files from vendor/assets.

Put below line into your application.css file, that will work great.

 *= require_tree ../../../vendor/assets/stylesheets/.

same thing can be done for Javascript assets.

Hum, I'd say you're using the asset manager in a strange way.

Everything in app/assets/, lib/assets/ and vendor/assets/* are mapped at the same place in /assets/ so, on the web side, it seems like they're all in the same folder.

What you should do, as you're in rails 3.1 is not use css/sass @import but sprockets require.

You should have at the top of your application.sass :

// require pages/common
// require_tree ./pages
// require jquery-ui
// require_self

so that sprockets put everything in the same file in production and you don't have to load a bunch of files.

When you are using engines, this get more tricky. A quick monkey path is to include the engines vendor path in the SASS_PATH Environment-variable. This is what worked for me in the engine.rb:

ENV['SASS_PATH'] = "#{ENV['SASS_PATH']}:#{File.expand_path('../../vendor/assets/stylesheets/')}"

From that point on, you could always put this into a method to DRY it up when you're including multiple engines in your project.