¿Cómo uso las hojas de estilo específicas del controlador en Rails 3.2.1?

Question

Uso de los carriles 3.2.1

---

yo creamos un controlador simple llamado Home usando el comando:

rails g controller Home index 

y creó un nuevo controlador y vista para mí:

Observe cómo hay dos hojas de estilo, una "Aplicación" y una "Casa". No puedo encontrar ninguna documentación que respalde esta suposición, pero supongo que debe poner estilos que solo se aplicarán a las vistas "Inicio", en el archivo Home.css.scss, ¿correcto?

Así como una prueba, he añadido en algunos estilos globales a Application.css.scss.erb y ejecutó la aplicación.

Los estilos aplicados como se esperaba.

A continuación, agregué algunas reglas al archivo Home.css.scss y visité una vista "Inicio/índice", pero el estilo en ese archivo no estaba adjunto, ni como un enlace de referencia de CSS separado, o incluso anexado al único archivo Application.css.scss. Esto es muy confuso para mí, ya que los comentarios dicen:

// Place all the styles related to the Home controller here. 
// They will automatically be included in application.css. 
// You can use Sass (SCSS) here: http://sass-lang.com/ 

¿Por qué no están las reglas escritas en Home.css.scss aplicarse a mi sitio web?

Answer 1

No creo que funcione de esa manera (Home.css se aplica solo a las acciones del controlador Home). Los diferentes archivos son solo para la separación, para que quede más claro qué describen las reglas de CSS. Puede leer este guide sobre la canalización de activos. Supongo que modificó el valor predeterminado application.css.scss y eliminó la línea que importa todos los archivos CSS del app/assets/stylesheets.

Answer 2

Se puede trabajar de esta manera y Marek es del todo correcto, la respuesta está en la guía. En el introduction to section 2.1:

Por ejemplo, si se genera un ProjectsController, Rails también añadir un nuevo archivo en app/assets/javascripts/projects.js.coffee y otro en app/assets/stylesheets/projects.css.scss. Usted debe poner cualquier JavaScript o CSS único a un controlador dentro de sus respectivos archivos de activos, ya que estos archivos pueden ser cargados sólo para estos controladores con líneas como <%= javascript_include_tag params[:controller] %> o <%= stylesheet_link_tag params[:controller] %>.

Así que para configurar su aplicación para cargar hojas de estilo específicas del controlador:

En primer lugar, desactiva la carga por defecto de todas las hojas de estilo mediante la eliminación de ningún extra requiere en el application.css manifiesto.

Normalmente, usted verá una entrada como esta:

*= require_tree . 

Si aún desea cargar algunos archivos CSS comunes, puede moverlos a un subdirectorio y hacer algo como esto:

*= require_tree ./common 

segundo lugar, en la disposición de su aplicación agregue el ejemplo stylesheet_link_tag sugerido

<%= stylesheet_link_tag "application", :media => "all" %> 
<%= stylesheet_link_tag params[:controller] %> 

En este Por ejemplo, primero cargamos el archivo css de la aplicación, luego cargamos cualquier archivo css que coincida con el nombre del controlador actual.

Answer 3

TL; DR:

ignorar el comentario, no está hecho por Sass. Pero ponga: @import "*"; en su archivo application.css.scss, e importará automáticamente todos los archivos scss del controlador.

lectura completa:

responsabilidad: Este es mi conocimiento actual del flujo de la tubería de activos con y sin Sass.

Creo que este comentario es escrito por la tubería estándar de rieles de activos (piñones), y no por Sass:

// Place all the styles related to the Home controller here. 
// They will automatically be included in application.css. 
// You can use Sass (SCSS) here: http://sass-lang.com/ 

La tubería estándar manejará archivos SCSS pero no presumir un application.css . scss file. Pero si crea un archivo con Sass, entonces Sass lo compilará en el archivo application.css.

Si utiliza la tubería normal de los carriles de activos, sin Sass, entonces habría piñones cargar el archivo CSS en el archivo application.css automáticamente (si el archivo tiene el *= require_tree . línea por defecto en ella).

Cuando utiliza Sass, con un application.css. scss, Sass compilará este archivo en un archivo application.css. (Supongo que sobrescribirá o tendrá prioridad sobre cualquier archivo application.css que ya tengas).

para obtener su home.css.scss archivo (y otros archivos de los controladores) se incluye de forma automática, poner esta línea en su application.css.scss archivo:

@import "*"; 

Como referencia, ver esto pregunta: Is it possible to import a whole directory in sass using @import?

Answer 4

He resuelto este problema con una solución simple.Añado a body el nombre del controlador como una clase, la edición de views/layouts/application.html.slim:

body class=controller.controller_name 

O views/layouts/application.html.erb:

<body class="<%= controller.controller_name%>"> 

Y luego en mi css sólo tiene que utilizar body.controller_name como espacio de nombres:

/* example for /users/ */ 

body.users { 
    color: #000; 
} 

body.users a { 
    text-decoration: none; 
} 

Para proyectos pequeños, creo que está bien.