web-dev-qa-db-fra.com

SASS, Rails 3.1: Chargement de feuilles de style dans des fournisseurs/actifs

J'utilise SASS pour charger des feuilles de style dans une application Rails 3.1 (sass-Rails 3.1). Par exemple, les partiels sass dans app/assets/stylesheets sont chargés à l'aide de @import dans application.sass -

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

Maintenant, je veux aussi charger vendor/assets/stylesheets. Notez que je n’utilise pas require vendor, car @import pages/* semble être la façon la plus sage de le faire. Les fichiers ici seront css, et non sass ou scss. Je ne peux pas utiliser @import ../../../vendor/assets/stylesheets/* car cela ne fonctionne que pour les fichiers sass et scss.

Y a-t-il une manière de faire ça ?

Mettre à jour

Ce que j'ai maintenant est ceci.

application.css.scss

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

Cela inclut tous les sass partiels mentionnés ci-dessus. Le require vendor dans

vendor/assets/stylesheets/vendor.css ressemble à

//= require_tree .

Un inconvénient de cette approche est que sass mixins (défini par l'utilisateur et plugins) et les variables communes ne sont pas disponibles dans tous les partiels. Ce que j’ai maintenant, c’est un _common_imports.sass qui @import est la première chose à faire dans tous les partiels.

common_imports.sass

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

Importer common_imports dans tous les partiels est très répétitif.

ruby-on-rails-3.1sasssprockets
18
Akshay Rawat

Si je vous comprends bien, je pense que cela pourrait aider.

Ajoutez les éléments suivants à config/application.rb, à l'intérieur du bloc class Application < Rails::Application:

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

Je viens d'ajouter ce qui précède à une application et les directives suivantes fonctionnent maintenant:

  • Importer Sass:
    @import 'grid' dans app/assets/stylesheets/application.css.scss trouve le fichier vendor/assets/stylesheets/_grid.scss;
  • Importer des CSS réguliers:
    @import 'background', toujours dans application.css.scss, trouve vendor/assets/stylesheets/background.css.

Est ce que ça aide? Désolé si j'ai mal compris le problème!

22
Leo

Notez que vous devrez redémarrer Rails si vous avez créé de nouveaux répertoires vendeur/* (par exemple, vendeur/stylesheets). Si vous voyez ceci dans Rails 3.2 ou version ultérieure, c'est probablement le coupable.

4
Alex Dixon

Essayez de remplacer l’extension par .scss pour votre feuille de style.

Une fois que j'ai fait cela, SASS a pu trouver l'importation requise.

3
Brian Wigginton

Vous pouvez utiliser le chemin ci-dessous afin de charger des fichiers d'actifs à partir de fournisseurs/actifs.

Mettez ci-dessous la ligne dans votre fichier application.css, cela fonctionnera très bien.

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

la même chose peut être faite pour les actifs Javascript.

3
Rameshwar Vyevhare

Hum, je dirais que vous utilisez le gestionnaire d'actifs d'une manière étrange.

Tout ce qui se trouve dans app/assets /, lib/assets/et vendor/assets/* est mappé au même endroit dans/assets /, de sorte que, côté Web, il semble qu'ils soient tous dans le même dossier.

Dans Rails 3.1, vous ne devez pas utiliser css/sass @import mais sprockets require.

Vous devriez avoir en haut de votre application.sass:

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

de sorte que les pignons mettent tout dans le même fichier en production et vous ne devez pas charger beaucoup de fichiers.

2
mat

Lorsque vous utilisez des moteurs, cela devient plus compliqué. Un chemin rapide pour le singe consiste à inclure le chemin du fournisseur du moteur dans la variable d'environnement SASS_PATH. C'est ce qui a fonctionné pour moi dans le engine.rb:

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

À partir de ce moment, vous pouvez toujours mettre cela dans une méthode pour DRY lorsque vous incluez plusieurs moteurs dans votre projet.

0
Figedi