Comment mes fichiers .scss sont-ils chargés dans Rails?
Rails est tellement surprotégé que c'est surtout égoïste. Cela peut parfois être difficile à comprendre.
Le HTML et le CSS simples sont faciles à comprendre. Entre les balises ``
'' du fichier HTML<link rel="stylesheet" href="application.css">
Écrivez un sort qui appelle la feuille de style comme ceci. Il est facile de comprendre intuitivement qu'il fait référence à application.css.
Mais pour Rails, c'est un peu différent. Rails est si intelligent qu'il le charge sans que vous ayez à l'écrire.
Cela peut être une fonctionnalité utile. Cependant, il est difficile pour les débutants de savoir quel fichier est chargé et où.
Cette fois, je vais expliquer comment la feuille de style scss est chargée dans Rails.
Conclusion: mettez le fichier scss dans app / asset / styleheet et tout sera résolu
application.html.erb lit application.css et tous les fichiers scss de asset / stylesheet seront lus tant que application.css sera lu.
Je vais expliquer le mécanisme.
"Application.html.erb" est une collection de fichiers HTML communs à toutes les pages. Le fichier CSS est lu par ce
.<%= stylesheet_link_tag 'application', media: 'all','data-turbolinks-track':'reload' %>
(À propos, l'assistant stylesheet_link_tag est celui qui spécifie le fichier CSS à lire, ce qui est presque le même que . C'est très facile de ne pas le faire, mais c'est ennuyeux pour les débutants car c'est difficile à comprendre. Ce type de Rails est pratique, mais il y en a beaucoup pour les débutants.)
Ensuite, regardons "application.css" dans la feuille de style chargée.
À propos de application.css
/*
.
.
.
*= require_tree .
*= require_self
*/
c'est écrit comme ça. ce
*= require_tree .
*= require_self
Est-ce que le foie.
ça signifie,
*= require_tree .Mais,
"Lisez tous les fichiers css sous app / assets / stylesheet /"
Dans ce sens
``` *= require_self```Mais
"Bien sûr, lisez aussi le contenu de moi (application.css)!"
Ça veut dire.
"Si vous me chargez, vous pouvez tout charger dans le répertoire / stylesheet / autre que moi et moi."
Il est écrit cela.
À propos, un tel fichier est appelé "fichier manifeste".
Cela ressemble au chiffre que je vous ai montré plus tôt.
Si "application.html.erb" lit "application.css" de cette manière, cela signifie que l'autre "session.scss (exemple)" est également lu.
Dans application.html.erb, il n'y a pas de description comme "Je vais charger session.scss!".
<%= stylesheet_link_tag 'application', media: 'all','data-turbolinks-track':'reload' %>
Avec cette seule description, tout a été lu.
Je suis reconnaissant de m'y habituer, mais c'est un concept qui est intuitivement inacceptable pour les débutants.
## Supplément 1
Ce qui précède est une image d'un débutant, et en fait, "application.css" est une image qui compresse d'autres fichiers css et scss ensemble.
Lorsque application.css est chargé, c'est une image que session.scss est également incluse dans application.css plutôt que de charger également d'autres session.scss.
## Supplément 2
Dans le passé, ces actifs se trouvaient dans l'annuaire public, mais maintenant ils sont dans les actifs.
Quand j'étudiais à Progate, j'ai appris à afficher des images du public. A cette époque, il était écrit que "/" était indispensable pour le chemin.
Le "/" est requis dans le chemin de l'image lors de l'appel depuis public. Au contraire, lors de l'actif, n'ajoutez pas "/". Le répertoire appelant est spécifié par la présence ou l'absence de ce /.
En le mettant en actif, il semble qu'il sera compressé et affiché facilement dans le pipeline d'actifs.
Recommended Posts