Jak używać arkuszy stylów specyficznych dla kontrolera w Rails 3.2.1?

Using Rails 3.2.1

Stworzyłem prosty kontroler o nazwie Home używając polecenia: 

rails g controller Home index

I stworzył dla mnie nowy kontroler i widok:

Tutaj wpisz opis obrazka

Zauważ, że istnieją dwa arkusze stylów, jeden "Application" i jeden "Home". Nie mogę znaleźć żadnej dokumentacji na poparcie tego założenia, ale zgaduję, że umieściłeś style, które będą stosowane tylko do widoków "Home", W Domu.css.plik scss, zgadza się?

Więc jako test dodałem w jakimś globalnym style do zastosowania.css.scss.erb i uruchomił aplikację.

Style zastosowane zgodnie z oczekiwaniami.

Następnie dodałem kilka zasad do domu.css.plik scss i odwiedziłem widok "Home / index" , jednak styl w tym pliku nie był dołączony, ani jako oddzielny odnośnik do CSS, ani nawet dołączony do pojedynczej aplikacji.css.plik scss. Jest to dla mnie bardzo mylące, ponieważ komentarze mówią: 

// 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/

Dlaczego zasady nie są napisane w domu.css.scss applied to my website?

Author: Only Bolivian Here, 2012-02-12
Source

4 answers

Myślę, że to nie działa w ten sposób (Home.css jest stosowane tylko do Home akcji kontrolera). Poszczególne pliki są po prostu do oddzielenia, aby wyjaśnić, jakie są reguły CSS opisujące. Możesz przeczytać ten przewodnik o potoku zasobów. Domyślam się, że zmieniłeś domyślną application.css.scss i usunąłeś linię importującą wszystkie pliki CSS z app/assets/stylesheets.

 7
Author: Marek Sapota,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-12 00:29:13

To może działać w ten sposób i Marek jest całkiem poprawny, odpowiedź jest w poradniku. W wstęp do sekcji 2.1:

Na przykład, jeśli wygenerujesz ProjectsController, Rails również doda nowy plik w app/assets/javascripts/projects.js.coffee i inny w app/assets/stylesheets/projects.css.scss. Należy umieścić dowolny JavaScript lub CSS unikalne do kontrolera wewnątrz ich odpowiednich plików zasobów, jak te pliki mogą być ładowane tylko dla tych kontrolerów z linii, takich jak <%= javascript_include_tag params[:controller] %> lub <%= stylesheet_link_tag params[:controller] %>.

Więc aby ustawić swoją aplikację na load controller specific stylesheets:

Najpierw wyłącz domyślne ładowanie wszystkich arkuszy stylów, usuwając wszelkie dodatkowe wymagania w aplikacji.Manifest css.

Zazwyczaj zobaczysz taki wpis: 

 *= require_tree .

Jeśli nadal chcesz załadować niektóre popularne pliki css, możesz przenieść je do podkatalogu i zrobić coś takiego: 

 *= require_tree ./common

Po drugie, w układzie aplikacji Dodaj sugerowany stylsheet_link_tag np 

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

W tym przykładzie najpierw Załaduj plik CSS aplikacji, a następnie załaduj dowolny plik css, który pasuje do bieżącej nazwy kontrolera.

 70
Author: benz001,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-24 13:45:15

Rozwiązałem ten problem prostym rozwiązaniem. Dodaję do body nazwę kontrolera jako klasę, edytując views/layouts/application.html.slim: 

body class=controller.controller_name

Lub views/layouts/application.html.erb: 

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

A potem w moim css używam body.controller_name jako przestrzeni nazw : 

/* example for /users/ */

body.users {
    color: #000;
}

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

Dla małych projektów myślę, że jest w porządku.

 14
Author: franzlorenzon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-07 14:47:30

TL; DR:

Zignoruj ten komentarz, nie jest napisany przez Sass. Ale umieścić: @import "*"; do Twojej aplikacji.css.plik scss i automatycznie zaimportuje wszystkie pliki SCSS kontrolera.

Pełna wersja:

Zastrzeżenie: to jest moje obecne zrozumienie przepływu potoku zasobów z Sass i bez niego.

Myślę, że ten komentarz jest napisany przez standard Rails Asset pipeline( sprockets), a nie przez 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/

Standardowy rurociąg będzie obsługiwał pliki scss, ale nie zakłada aplikacji.css.scss plik. Ale jeśli utworzysz taki plik za pomocą Sass, to Sass skompiluje go do aplikacji.plik css .

Jeśli używasz zwykłego potoku zasobów rails, bez Sass, to sprockets załaduje plik css do aplikacji .plik css automatycznie (jeśli w tym pliku znajduje się domyślna linia *= require_tree .).

Kiedy używasz Sass, z aplikacją .css.scss / align = "left" / skompiluj ten plik do aplikacji .plik css . (Zakładam, że nadpisuje lub ma pierwszeństwo przed dowolną aplikacją.plik css, który już miałeś).

Aby dostać się do domu.css.plik scss (i inne pliki kontrolera) Automatycznie dołączony, umieść tę linię w swojej aplikacji .css.scss plik: 

@import "*";

W celach informacyjnych, zobacz to pytanie: czy można zaimportować cały katalog w sass używając @import?

 4
Author: Magne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:32