如何在Rails 3.2.1中使用Controller特定的樣式表？

使用Rails 3.2.1如何在Rails 3.2.1中使用Controller特定的樣式表？

我創建了一個使用命令調用主頁簡單的控制器：

rails g controller Home index

它創造了我一個新的控制器和視圖：

enter image description here

請注意，有兩個樣式表，一個「應用程序」和一個「主頁」。我無法找到任何文檔來支持這種假設，但我猜你將只應用於Home.css.scss文件中的「Home」視圖的樣式正確嗎？

因此，作爲測試，我將一些全局樣式添加到Application.css.scss.erb並運行應用程序。

按預期應用樣式。

接下來，我在Home.css.scss文件中添加了一些規則，並且我訪問了「Home/index」視圖，但該文件中的樣式未附加，既不作爲單獨的CSS參考鏈接，也不作爲甚至附加到單個Application.css.scss文件。這是非常令人困惑我，因爲評論說：

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

爲什麼不寫在Home.css.scss規則應用到我的網站？

來源

2012-02-12 Only Bolivian Here

我不認爲它這樣工作（Home.css僅適用於Home控制器操作）。不同的文件只是爲了分離，使CSS規則描述的更清晰。您可以閱讀有關資產管道的此guide。我猜你改變了默認application.css.scss並刪除了從app/assets/stylesheets導入所有CSS文件的行。

來源

2012-02-12 00:29:13

是的，你是正確的我刪除了'* = require_tree'，因爲它導致Sprocket的循環依賴。我不知道這是什麼意思，因爲我是Rails的新手，但刪除解決了這個問題。令人驚訝的是，我已經添加了回來，以測試您的答案，現在它運行順利。：S仍然很困惑。 – 2012-02-12 00:32:41

它可以這樣工作，馬立克是相當正確的，答案是在指導。在introduction to section 2.1：

例如，如果您生成一個ProjectsController，Rails會也在app/assets/javascripts/projects.js.coffee，另一個在app/assets/stylesheets/projects.css.scss添加新的文件。您應該將任何JavaScript或CSS獨特的控制器放入其各自的資產文件中，因爲這些文件可以通過<%= javascript_include_tag params[:controller] %>或<%= stylesheet_link_tag params[:controller] %>等行來加載。

所以設置你的應用加載控制器的具體樣式：

首先，通過移除任何額外禁用所有樣式表的默認加載需要在application.css清單。

通常你會看到類似這樣的項：

*= require_tree .

如果你仍然想加載一些常見的CSS文件，你可以將它們移到一個子目錄，做這樣的事情：

*= require_tree ./common

其次，在你的應用程序佈局添加所建議的stylesheet_link_tag如

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

在這例如我們首先加載應用程序的css文件，然後加載任何匹配當前控制器名稱的css文件。

來源

2013-03-04 00:53:43 benz001

TL; DR：

忽略的評論，它不是由薩斯製造。但放： @import "*"; 到您application.css.scss文件，它會自動導入所有的控制器SCSS文件。

完全讀取：

免責聲明：這是我目前使用和不薩斯資產管道流量的理解。

我覺得這個評論是由標準的Rails資產管道（鏈輪）寫的，而不是由薩斯：

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

標準管道將處理SCSS文件，但不設定一個application.css。 scss文件。但是，如果您使用Sass創建這樣的文件，那麼Sass會將其編譯爲application.css文件。

如果使用普通的Rails資產管道，無薩斯，然後將鏈輪自動加載CSS文件到application.css文件（如果該文件具有默認*= require_tree .線的話）。

當您使用無禮的話，有application.css。 SCSS文件，薩斯將編譯該文件爲application.css文件。（我認爲它會覆蓋或優先於你已有的任何application.css文件）。

爲了讓您的home.css.scss文件（及其他控制器的文件）自動包含，把此行到您的application.css.scss文件：

@import "*";

僅供參考，請參閱本問題： Is it possible to import a whole directory in sass using @import?

來源

2013-09-26 14:32:51 Magne

我已經解決了這個問題，一個簡單的解決方案。我添加到body控制器名稱爲一類，編輯views/layouts/application.html.slim：

body class=controller.controller_name

或者views/layouts/application.html.erb：

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

然後在我的CSS我只是用body.controller_name作爲命名空間：

/* example for /users/ */ 

body.users { 
    color: #000; 
} 

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

對於小型項目，我認爲沒關係。

來源

2014-04-07 14:47:30 franzlorenzon

這也是Sam Ruby在Agile Development with Rails 4一書中的首選答案。如果您使用scss只是簡單地將您的整個代碼封裝在您的控制器名稱中，就像.body {/ *整個css代碼在這裏* /} – coderVishal 2015-08-04 15:12:55

如何在Rails 3.2.1中使用Controller特定的樣式表？

回答

相關問題