web-dev-qa-db-fra.com

Ajout de feuilles de style CSS spécifiques à la page à Rails Asset Pipeline

Ceci est une question que plusieurs personnes ont déjà posée, mais aucune des questions n'a été tout à fait posée ou répondue d'une manière que j'ai trouvée utile, alors j'écris la question et la réponse que j'aurais trouvées utiles.

J'ai une application Rails 3.1+ utilisant le pipeline d'actifs. Il y a une action spécifique que je veux faire utiliser différentes CSS. (Dans mon cas spécifique, j'ai une page destinée à être imprimée, elle a donc vraiment besoin de CSS complètement différent et n'a pas besoin de Javascript.) Actuellement, je n'ai qu'un fichier CSS spécifique à l'application. Comment ajouter le nouveau fichier CSS et orienter le pipeline d'actifs vers mon fichier?

Par exemple, en ce moment, mon app/assets ressemble à

app/assets
    /javascript
        application.js
        custom.js.coffee
    /css
        application.css
        custom.css.scss

Je souhaite ajouter un fichier print.css utilisé par la vue d'une action spécifique. Cette vue n'utilisera pas le fichier application.css. Comment puis-je ajouter print.css?

ruby-on-railsasset-pipeline
15
Kevin

J'ai trouvé cet article de blog très utile: http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/ . Ma réponse paraphrase ce que ce blogueur a déjà écrit et complète quelques détails manquants.

Premièrement, il est important que vous ayez lu et compris le Guide Rails du pipeline d’actifs . Malheureusement, ce guide n'explique pas clairement comment ajouter des actifs spécifiques à une action, mais il aborde certains concepts que vous devez connaître. Assurez-vous de bien comprendre ces idées:

  • Le pipeline d'actifs compile les ressources Javascript, CSS et autres, de sorte que les serveurs Rails puissent mettre en cache des ressources pour de meilleures performances.
  • Les fichiers de manifeste utilisent des commandes telles que require, require_tree et require_self pour indiquer quels fichiers sont compilés ensemble.
  • Pour que le pipeline d'actifs fonctionne correctement en production, vous devez exécuter manuellement rake assets:precompile afin de générer les actifs compilés et minifiés dans le répertoire public.

Ces idées constituent le minimum d'informations à connaître sur le pipeline d'actifs. Si vous ne comprenez pas déjà ces idées, vous n’avez pas un niveau de connaissance "expert ou enthousiaste" sur le pipeline, et malheureusement, SO n’est pas le lieu idéal pour apprendre ce type de produit. Heureusement, le le Guide Rails du pipeline d’actifs est une lecture courte de 15 minutes et peut vous permettre d’être rapidement opérationnel si vous en avez besoin.

Deuxièmement, vous devez apporter ces modifications pour vous assurer que le pipeline d'actifs voit et gère correctement votre nouveau fichier print.css.

Suivez ces étapes:

  1. Ajoutez votre fichier print.css à app/assets/css.
  2. Vous devrez créer un fichier manifeste indiquant à Rails où trouver print.css. Vous devez le faire, même si vous n’ajoutez qu’un seul fichier CSS. C'est une étape facile:
    • Ajoutez un fichier appelé print.js à app/assets/javascript.
    • Ajoutez cette ligne à print.js:
 // = nécessite une impression

Ce sera la seule ligne de tout le fichier print.js. Si je comprends bien, Rails s'attend à ce que les fichiers manifestes portent l'extension .js, raison pour laquelle nous n'utilisons pas print.css comme fichier manifeste.

  1. Nous devons maintenant demander à Rails de trouver et d’utiliser le manifeste print.js. Ajoutez la ligne suivante dans votre fichier config/application.rb:
 config.assets.precompile + =% w (print.js)
  1. Nous avons presque fini! Cependant, le manifeste application.js déjà présent comprend la ligne //= require_tree ., ce qui signifie qu'il inclura votre fichier print.css. Votre style print.css affectera ainsi l’ensemble du site, pas seulement la vue unique. Il y a deux façons de gérer cela:
    • Si application.js et print.js ne partagent aucun actif, vous pouvez utiliser la commande stub dans votre application.js pour exclure les actifs utilisés dans print.js. Ceci permet à application.js de supprimer les actifs référencés par print.js de sa propre liste de fichiers référencés. Notre application.js modifié ressemble à:
 (snip ...) 
 require_tree. 
 stub print

Voir cette réponse pour plus d'informations.

  • Si vos fichiers print.js et application.js partagent des actifs, vous devez déplacer tous les actifs utilisés par application.js dans des sous-répertoires. Je ne l'ai pas fait moi-même, alors je ne suis pas le plus utile dans ce domaine. Regardez cette réponse pour des instructions.

Nous avons maintenant inclus print.css dans le pipeline d’actifs. Nous devons maintenant demander à Rails d'utiliser print.css dans votre vue spécifique.

Supposons que votre action se trouve dans le contrôleur reports et qu'elle s'appelle print_reports. Cela signifie que nous avons un fichier reports_controller.rb et un fichier print_reports.html.erb (ou .haml). Nous devons apporter plusieurs modifications à ces fichiers.

  1. Pour commencer, ajoutez une nouvelle mise en page dans app/views/layouts. Peut-être l'appeler print.html.erb. Nous allons utiliser cette nouvelle mise en page pour votre fichier print_reports.html.erb. Configurez-le comme vous le souhaitez. Pour une page destinée à être imprimée, cela sera probablement très simple, tel que
 <html> 
 <head> 
 <title = "Imprimer"> 
 </ head> 
 <body> 
 <% = rendement%> 
 </ body> 
 </ html>

L'utilisation d'une présentation distincte présente l'inconvénient qu'il est difficile de synchroniser cette présentation et celle utilisée par le reste de l'application, mais si vous utilisez des fichiers CSS distincts pour l'action, il est peu probable que vous souhaitiez que la présentation soit identique. .

  1. Ajoutez un stylesheet_link_tag dans l'en-tête de la mise en page pointant vers votre print.css:
 <html> 
 <head> 
 <title = "Print" />
 <% = stylesheet_link_tag "print"%> 
 </ head> 
 <body> 
 <% = rendement%> 
 </ body> 
 </ html>
  1. Dans le contrôleur, nous dirons à Rails d'utiliser notre nouvelle présentation pour l'action. Ajoutez la ligne layout 'print', only: [:print_reports] à votre contrôleur:
 class reports_controller <ApplicationController 
 layout 'print', uniquement: [: print_reports] 
 
 #snip

Voir cette question pour plus d’informations et quelques approches différentes.

À ce stade, lorsque vous exécutez l'application, votre action print_reports devrait utiliser print.css correctement!

N'oubliez pas d'exécuter rake assets:precompile avant de déployer sur le serveur.

23
Kevin

Vous mettez tous des réponses très compliquées.

1 Allez à app/assets/stylesheets
2.Faites un fichier avec l'extension .css
3.Allez dans config/initializers/assets.rb
4. Mettez cette ligne de code Rails.application.config.assets.precompile += %w( file.css )
5.Remplacez file.css par le fichier que vous avez créé
6.Allez dans votre fichier html.erb
7. Tapez ceci dans le <head>, <%= stylesheet_link_tag "file" %>
8.Remplacez file par le nom de fichier (aucune extension dans le nom)

Good Job, vous avez lié le fichier!

2
Rishi Ryan

Solution officielle

Il est documenté dans les guides officiels Rails ici: http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets

En fait, vous pouvez laisser de côté la directive require_tree (située dans application.css et application.js ), puis utilisez-la dans votre modèle:

Pour JavaScript spécifique au contrôleur:

<%= javascript_include_tag params[:controller] %>

Pour les CSS spécifiques au contrôleur:

<%= stylesheet_link_tag params[:controller] %>
2
Bijan

Dans votre mise en page

<head>
  // ...
  <%= yield :stylesheets %>
</head>

À votre avis

<%= provide :stylesheets do %>
  // your page-specific css
<% end %>
1
gilbertlcsndle