J'ai trouvé une façon élégante de faire Rails. Tout d'abord, renommez votre .scss
fichier en .scss.erb
, puis utilisez une syntaxe comme celle-ci (exemple pour l' élément CSS CSS highlight_js-rails4 gem ):
@import "<%= asset_path("highlight_js/github") %>";
Pourquoi vous ne pouvez pas héberger le fichier directement via SCSS :
Faire un @import
dans SCSS fonctionne très bien pour les fichiers CSS tant que vous utilisez explicitement le chemin complet d'une manière ou d'une autre. En mode développement, rails s
sert les actifs sans les compiler, donc un chemin comme celui-ci fonctionne ...
@import "highlight_js/github.css";
... car le chemin hébergé est littéralement /assets/highlight_js/github.css
. Si vous faites un clic droit sur la page et "voir la source", puis cliquez sur le lien pour la feuille de style avec ce qui précède @import
, vous verrez une ligne là-dedans qui ressemble à:
@import url(highlight_js/github.css);
Le moteur SCSS se traduit "highlight_js/github.css"
par url(highlight_js/github.css)
. Cela fonctionnera parfaitement jusqu'à ce que vous décidiez d'essayer de l'exécuter en production où les ressources sont précompilées ont un hachage injecté dans le nom du fichier. Le fichier SCSS sera toujours résolu en un état statique /assets/highlight_js/github.css
qui n'a pas été précompilé et qui n'existe pas en production.
Comment fonctionne cette solution:
Premièrement, en déplaçant le .scss
fichier vers .scss.erb
, nous avons effectivement transformé le SCSS en un modèle pour Rails. Maintenant, chaque fois que nous utilisons<%= ... %>
balises de modèle, le processeur de modèle Rails remplacera ces extraits par la sortie du code (comme tout autre modèle).
La mention asset_path("highlight_js/github")
dans le .scss.erb
fichier fait deux choses:
- Déclenche la
rake assets:precompile
tâche pour précompiler le fichier CSS approprié.
- Génère une URL qui reflète correctement l'actif quel que soit l'environnement Rails.
Cela signifie également que le moteur SCSS n'analyse même pas le fichier CSS; il s'agit simplement d'héberger un lien vers celui-ci! Il n'y a donc pas de correctifs de singe hokey ou de solutions de contournement grossières. Nous servons un actif CSS via SCSS comme prévu, et utilisons une URL vers cet actif CSS comme prévu par Rails. Doux!