18

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.

Akshay Rawat
  • 4,714
  • 5
  • 40
  • 65

6 Answers6

22

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!

Leo
  • 4,217
  • 4
  • 25
  • 41
  • 3
    the ```config.sass.load_path``` bit is not required anymore. – Akshay Rawat Oct 11 '11 at 15:10
  • Interesting, is that because of updates in Compass or Rails 3.1.1? – Leo Oct 11 '11 at 16:02
  • I really don't want to have to import each file in `vendor/assets/stylesheets` separately. Is there a way to, in addition to using `@import blah`, also use `= require_tree ../../../vendor/assets/stylesheets`? I can't get them both to work together. – chadoh Nov 27 '11 at 02:06
  • 1
    Hi @chadoh, I think unfortunately this may be considered undesirable, for reasons better explained [here](http://groups.google.com/group/sass-lang/browse_thread/thread/8edae9d1f738064f?pli=1). If the import order really is irrelevant to you, perhaps a simple shell script to generate some kind of 'imports' file would be best, and then you can simply `@include` that file. – Leo Nov 28 '11 at 20:48
  • 4
    Correct answer. Only cleanup I would suggest is something more like `config.sass.load_paths += %w(vendor lib).map {|l| Rails.root.join(l, 'assets', 'stylesheets') }` to get around the relative paths and slightly DRYer. _Eventhough this doesn't fully answer the original question with regards to whole directory inclusion_. – Simon Mar 10 '12 at 01:56
4

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.

Alex Dixon
  • 613
  • 4
  • 11
3

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

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

Brian Wigginton
  • 2,632
  • 3
  • 21
  • 28
3

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.

Rameshwar Vyevhare
  • 2,699
  • 2
  • 28
  • 34
2

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.

mat
  • 12,943
  • 5
  • 39
  • 44
  • Problem with using sprockets here is that variables are not shared across partials. For example, colors variables defined in ```pages/common``` will not be visible in ```pages/home```. Instead now, each partial has to ```@import``` the common required bits. – Akshay Rawat Sep 10 '11 at 19:34
  • Ah, yes, I don't think it was supposed to be used that way, yes. I don't quite know how to do what you need. – mat Sep 10 '11 at 19:38
0

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.

Figedi
  • 383
  • 1
  • 2
  • 11