使用不同的風格在rails中的不同視圖

Rails 5.1

我主要工作在後端問題，但我想了解更多關於前端的東西，並且我對如何在Rails中處理樣式有些困惑（我讀過通過stackolverflow上的一堆答案，但這並沒有幫助我縮小它）。使用不同的風格在rails中的不同視圖

我有兩個不同的看法

views/user/login.html.slim 
views/user/new.html.slim

我想不同的車身樣式應用到每個視圖。當生成應用程序時，Rails添加了：

assets/stylesheets/users.css.scss

我需要添加一個文件夾，稱爲用戶並在其中有不同的樣式表嗎？是這樣的：

assets/stylesheets/users/login.css.scss

會在它：

body { 
    padding-top: 40px; 
}

和

assets/stylesheets/users/new.css.scss

會在它：

body { 
    padding-top: 80px; 
}

然後，在

stylesheets/application.css.scss

我想補充：

*= require_self 
*= require_tree .

來源

2017-10-13 EastsideDeveloper

你的意思是創建partials並從不同的頁面呈現它們嗎？ – zee

不，我編輯了我的問題，希望現在更清楚 – EastsideDeveloper

的風格和JavaScript的是從你的佈局加載。開箱即用它看起來像這樣： app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all' %> 
<%= javascript_include_tag 'application' %>

如果你只是想在一個特定視圖特定CSS文件，你將需要：

爲特定視圖創建佈局。
在佈局中包含適當的樣式和javascript。
指定控制器中的特定佈局。

這是關於layouts的一些更多信息，但讓我們通過它爲您的登錄示例。

app/controllers/sessions/create 

class SessionsController < ApplicationController 
    layout 'login', only: [:new] 
    # you could also call the layout "sessions.html.erb" and it will be 
    # loaded automagically

如果您要使用不同的操作不同的佈局在同一個控制器，你可以添加其他的佈局方法，並指定它們適用於與only行動的行動。

則佈局

app/views/layouts/login.html.erb 

... 
<%= stylesheet_link_tag 'login', media: 'all' %> 
...

最後你的樣式

app/assets/stylesheets/login.scss 

@import "file_you_want";

如果你require_tree .它會加載在樣式表目錄中，我不認爲所有的風格是你所追求的。

來源

2017-10-13 02:10:07 Correlator

使用不同的風格在rails中的不同視圖

回答

相關問題