2014-09-22 2 views
32

J'ai un plug-in avec de nombreux types de fichiers, et sa propre structure d'arbre (html, css, js, documentation, images, etc.)Comment charger le dossier des ressources du fournisseur dans Rails 4?

Plutôt que de passer par le dossier de plug-in, et diviser tous les fichiers CSS et js dans les dossiers vendor/assets/js/vendor/assets/css/, je veux juste garder le dossier entier du plugin tel quel. Par exemple,

vendor/assets/multipurpose_bookshelf_slider/

Comment puis-je faire que les chemins se chargent correctement, et les référencer dans mes fichiers manifestes?

Actuellement, j'ai un lieu de fichiers comme suit (non exhaustive)

/my_app/vendor/assets/multipurpose_bookshelf_slider/css/skin01.css 
/my_app/vendor/assets/multipurpose_bookshelf_slider/js/jquery.easing.1.3.js 
/my_app/vendor/assets/multipurpose_bookshelf_slider/ 
/my_app/vendor/assets/multipurpose_bookshelf_slider/ 

Je les référençant dans

application.js

//= require multipurpose_bookshelf_slider/js/jquery.easing.1.3.js 
//= require multipurpose_bookshelf_slider/js/jquery.bookshelfslider.min.js 

application.css.scss

@import "css/bookshelf_slider"; 
@import "css/skin01"; 

Répondre

64

Tout dossier créé directement sous assets sera ajouté aux chemins de chargement. Les fichiers dans ce dossier peut être référencé comme d'habitude comme ceci:

Si vous avez

  • vendor/assets/custom/js/file.js

  • vendor/assets/custom/css/file.css

puis vendor/assets/custom/ seront ajoutés aux chemins de charge.

Inclure vos fichiers dans les fichiers suivants en procédant comme suit:

application.js

//= require js/file

application.css.scss

@import "css/file";

Une fois cela fait, assurez-vous de redémarrer votre serveur local, car c'est au démarrage de votre serveur que les chemins de chargement sont reconnus.

Remarque: pour afficher la liste des chemins de chargement, tapez votre terminal rails c, puis tapez Rails.application.config.assets.paths.

+1

pourquoi application.css.scss au lieu de simplement application.css? Cela mérite un peu plus d'explications pour les débutants – emery

+0

scss est un suffixe de type de fichier. il utilise le pré-processeur sass/scss. dans les rails, les suffixes de chaînage le font analyser par le «dernier» suffixe correspondant, dans cet ordre. http://thesassway.com/ La question est de savoir comment charger des ressources, quel que soit le fichier. S'il existe d'autres éléments d'autres suffixes (par exemple, jpg, etc.), ils sont également associés à des valeurs de chaîne regex ou littérales. Il est bon d'éclaircir les choses pour les débutants. Je pense que cela n'a pas d'importance pour la question. – ahnbizcad

+1

oh je vois ce que tu veux dire. le fichier scss n'était pas référencé dans le fichier css "master", application.css. Mais plutôt, l'application.css elle-même a été changée. Juste point. Je rétracte ma prétention que c'est immatériel. La réponse, commodément, est exactement la même si =] pré-traitement CSS sont super pratique, et SASS/SCSS est un très bon. d'autres sont MOINS. L'autre est Stylus, que je trouve a une syntaxe plus propre que les deux autres, mais semble avoir moins d'un écosystème autour d'elle. – ahnbizcad

4

Si l'application que vous utilisez est l'actif-pipeline activé, il devrait trouver vos actifs après l'élargissement du chemin dans votre application.rb

config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider") 
+0

Comme le dit la réponse de [ahnbizcad] (https://stackoverflow.com/a/25985318/641451), le chemin doit être automatiquement ajouté aux chemins d'actifs. Si vous ne les voyez pas, il se peut que vous deviez ** redémarrer l'application ** après avoir ajouté le nouveau dossier vendu: le chemin de recherche n'est mis à jour qu'au démarrage. – mgarciaisaia

2

Je préfère la réponse de D7na mais avec un peu d'amélioration mon avis.

Tant que cela est lié à des actifs, je pense qu'il est préférable d'être placé dans le fichier assets.rb.

assets.rb:

Rails.application.config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider") 
Questions connexes