SASS, Rails 3.1: Loading stylesheets in vendor/assets

Question

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/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.

Answer 1

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!

Answer 2

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.

Answer 3

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

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

Answer 4

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.