Pour un Rails de Vue *.html.erb : où puis-je place la feuille de style?

J'ai ce fichier:

app/views/listings/list.html.erb

dans mon rails de projet.
Voici le contenu du fichier:

<h1>This file is:"list.html.erb"</h1>  

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=false">  
    </script>  

    <%=javascript_include_tag 'application'%>  
  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:80%; height:80%"</div>    
    <input type="button" onclick="getlistings();" value="Add Markers">   
    <input type="button" onclick="clearMarkers();" value="Remove Markers">   
  </body>  
</html>

Id que d'appliquer une feuille de style pour elle. Où dois-je placer la feuille de style? J'ai essayé de placer le code dans ce fichier:

app/assets/stylesheets/listings.css.scss

Mais le style n'a pas été appliqué au fichier html. Aussi ai-je besoin de changer quelque chose dans mon code html afficher le fichier à inclure la feuille de style?

C'est la feuille de style qui réside à : "app/assets/css/listings.css.scss"

//Place all the styles related to the Listings controller here.  
//They will automatically be included in application.css.  
//You can use Sass (SCSS) here: http://sass-lang.com/ 
.listings  
{  
  table tr td  
  {  
    padding: 5px;  
    vertical-align: top;  
  }  


dt  
{  
  color: #232;  
  font-weight: bold;  
  font-size: larger;  
}  

dd  
{  
  margin: 0;  
}  
}  
#map_canvas  
{  
  width: 80%;  
  height: 80%;  
}

Donc, vous demandez-vous si quelqu'un peut me donner un coup de main?

Grâce

EDIT

Si l'application.html.erb fichier est bien, c'est l'application.css. J'ai modifié la liste.html.erb fichier après la lecture de la réponse affichée ci-dessous.
La nouvelle liste.html.erb fichier est comme suit:

<h1>Filename = list.html.erb</h1>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }   
</style>  
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=AIz&sensor=false">  
</script>  
<%= stylesheet_link_tag 'application' %>  
<%=javascript_include_tag 'application'%>

<%= stylesheet_link_tag "inscriptions" %>

Seule question est maintenant, je veux prendre

<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }  
</style>

cette partie de la liste.html.erb et le mettre dans la liste.css.scss fichier. Mais quand je le fais, que le map_canvas disparaît de la page, il ne marche pas montrer.

Où en êtes-vous de copier et de coller le code HTML de la partie à partir de, après votre H1, entre <!DOCTYPE html> et </html>? Est que votre application fichier de mise en page?
Non, je n'ai qu'une partie d'un tutoriel en ligne qui a montré comment l'utilisation de Google maps v3. Ils avaient utilisé ce code html dans leur exemple. Pourquoi n'est-ce pas comment sa censé être?
Eh bien, c'est que le contenu exact de votre app/views/listings/list.html.erb fichier? Si donc il ne devrait pas être. L'extérieur HTML, TÊTE etc. pour toute page doit être situé dans votre layouts/application.html.erb fichier. Vous ne devriez jamais avoir un deuxième <HTML> à l'intérieur d'une page.
Ouais c'est le contenu exact. Oh, je vois. L'exemple que j'ai utilisé, nous a demandé de nous prendre que le fichier de mise en page. OK, merci beaucoup pour l'astuce!

InformationsquelleAutor banditKing | 2012-04-20

css ruby-on-rails

11

Où vous mettez la feuille de style est bien. Vous devez vous assurer que votre application de mise en page (app/views/layouts/application.html.erb) comprend les feuilles de style dans l'en-tête:
```
stylesheet_link_tag 'application'
```
Alors vous devez vous assurer qu'il est inclus dans le manifeste: app/assets/stylesheets/application.css

En haut, vous devriez voir un bloc qui ressemble à ceci:
```
/* ...
*= require_self
*= require_tree .
*/
```
Si elle ne dit *= require_tree . alors il ne sera pas le chargement automatique de fichiers scss dans vos feuilles de style directement. Voir pour plus de le guide rails.

Si votre application de mise en page et de manifester sont correctes et que vous avez encore des questions, ajouter le texte de ces fichiers à la question et je vais prendre un coup d'oeil.

Mise à jour: Aussi, il semble que vous n'êtes pas la compréhension des mises en page correctement.

Quand tout point de vue rend vous voulez que le résultat final ressemble à ceci:
```
<!DOCTYPE HTML>
<html>
  <head>
    ...header stuff goes here...
  </head>
  <body>
    ... body stuff goes here...
  </body>
</html>
```
Vos en-têtes, etc. sont assez standard des trucs qui se répètent tout le temps, seulement le contenu dans la partie principale de votre page est différent d'une page à l'autre. Donc, pour vous éviter d'avoir à répéter ce genre de choses, encore et encore Rails utilise layouts.

Votre fichier de mise en page, app/views/layouts/application.html.erb devrait ressembler à ceci (au minimum)
```
<!DOCTYPE html>
<html>
  <head>
    <title>The name of your site</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %>
  <head>
  <body>
    <%= yield %>
  </body>
</html>
```
Lorsque vous chargez une vue donnée rails de remplir le contenu à partir de ce point de vue où l' rendement de commande est dans la mise en page.

Note, votre point de vue est mal nommé. Si vous affichez une liste de elle devrait être app/views/listings/show.html.erb, ou si vous montrant de l'index de toutes les listes qu'il devrait être app/views/listings/index.html.erb.

Alors dans ce fichier, vous devez avoir:
```
<h1>This file is:"index.html.erb"</h1>
```
Voir le guide rails pour en savoir plus sur les mises en page et le rendu.

Cependant, il semble que vous essayez de plonger dans les rails avec aucune idée de ce qui se passe dans le système. Bienvenue sur les Rails, je pense que vous trouverez que c'est vraiment génial, mais vous le ferez vous-même une faveur énorme pour commencer avec un bon tutoriel. Vous pouvez essayer le Guide De Mise En Route. Je recommande également Michael Hartl du livre "les Rails de 3 Tutoriel". C'est une ressource formidable.
- application.fichier css contient les informations dont vous avez mentionné dans votre post. C'est une formidable réponse. Merci beaucoup. J'ai ajouté de l'application.html.erb fichier ci-dessus et je travaille sur l'intégration de vos suggestions. Merci encore.
- Pas de prob. Si cette réponse vous a aidé, faites-vous l'esprit de l'accepter?
- Fait. Merci beaucoup encore une fois!
InformationsquelleAutor Andrew
2

J'avais appris à connaître le même problème mais résolu, suivez les instructions ci-dessous
1. placez votre xxxx.fichier css dans les actifs/feuilles de style e.g dans app/assets/css/xxxx.css
2. Modifier /config/initializers/actifs.rb et collez ce code
Rails.application.config.assets.precompile += %w( xxxx.css )
et de l'enregistrer.

3 - dans les balises d'en-tête de la section de votre liste.html.erb ajouter
```
<%= stylesheet_link_tag 'xxxx' %>
```
e.g
```
<head>
<%= stylesheet_link_tag 'xxxx' %>
<head>
```
4.Le redémarrage de serveur rails pour les effets

Froid!!!!

InformationsquelleAutor Mian Kashif Ali
0

Vous devriez avoir un stylesheet_link_tag dans <head>:
```
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
```
Si vous ne disposez pas d'une application.css manifeste, vous pouvez faire un lien vers la feuille de style directement à la place:
```
<%= stylesheet_link_tag 'listings' %>
```
InformationsquelleAutor Simon Perepelitsa

Vous devez vous connecter pour publier un commentaire.