以控制器为中心的资产

Question

我在Rails中有四个控制器（Pages，Sessions，Records，Users，）并且每个控制器都有一个默认pages.css.scss命名的单独样式表， sessions.css.scss，等等。我的全局样式都进入了application.css。

但是，来自单独样式表的CSS似乎重叠并显示在错误的页面上。例如，我有一个 main div，其宽度不同，用于我的Sessions控制器（登录页面）和我的Records控制器（搜索功能）。但是，当我为其中一个更新CSS时，新的样式显示在两个页面上。

发生了什么，我该如何解决这个问题？

Answer 1

这是由于Sprockets＆amp;糟糕的CSS结构。

#app/assets/stylesheets/application.css
*= require_all

问题不是CSS，而是您调用它的方式 - 无论是在资产管道还是应用程序中。

以上内容将把你所有的css连接到主application.css文件中。虽然这看起来似乎无害，但如果您的CSS定义存在冲突，他们将自行覆盖。

解决这个问题的方法是首先确保您的CSS 和与仅为您的应用程序调用适当的CSS。

<强>链轮

要更好地了解修复，您需要了解sprockets。

Sprockets 编译您的资产，使其尽可能高效。

您的资产位于资产管道中，资产管道已创建为能够为应用的不同部分加载适当的CSS - 既高效又通用。

＆＃34;传统＆＃34; Rails的方法是鼓励您使用 controller 中心资产和应用程序级资产：

#app/assets/stylesheets/controller.css
#app/assets/stylesheets/application.css

如果您的CSS在原地工作，这是可以的，但如果它没有，那么您就会遇到问题（就像您正在经历的那样）。

因此，修复的方法是首先确保您根据需要拆分CSS，并且正确编写CSS（一秒钟内更多）。

以控制器为中心的资产

<强> 1。删除＆＃34; application.css＆＃34;

中的所有引用

链轮让您能够“包括”＃34;主application.css文件中的其他文件：

#app/assets/stylesheets/application.css
*= require_all <- remove this line

这会阻止您的＆＃34; application.css＆＃34;将所有其他编译到其中的文件。其他人将自行编译，允许您call them separately：

<强> 2。布局

#app/layouts/application.html.erb
<%= stylesheet_link_tag "application", controller_name %>

这将允许您使用基本级应用程序CSS调用以控制器为中心的资产。

这样做的缺点是你必须重复很多CSS，并且最终会为你应用的不同部分提供完全不同的CSS - 而不是最好的。

CSS结构

另一种方法是使您的CSS结构正确。这很难实现，但会给你更清晰的结果......

我的会话控制器（登录页面）和记录控制器（搜索功能）具有不同宽度的主 div。< / p>

#app/assets/stylesheets/application.sass
.main
  /* main styling */
  &.search 
     /* search styling here */
  &.results
     /* results styling here */

这将允许您致电：

#app/views/layouts/application.haml
.main.search search stuff here
.main.results results stuff here

Answer 2

为控制器提供CSS文件背后的想法是创建彼此完全独立的功能，而不仅仅是关于ruby代码的独立功能。如果你想坚持下去，你可以为每个控制器设置不同的布局，只包含相应的CSS文件，rails会自动尝试使用一个名为控制器的布局，如果找不到，它会回退到application.html.erb。 / p>

在实践中，我认为通过将config.generators.stylesheets = false添加到application.rb配置文件并拥有自己的CSS文件层次结构，可以更轻松地为每个控制器禁用自动生成CSS文件。看看this。

希望有所帮助

修改如果您打算坚持使用单独的css文件，那么另一个逻辑解决方案是在视图上具有不同的类属性，例如用户的所有视图都有<div class="userPage"></div>包装内容并在css文件上使用它以防止重叠。

Answer 3

通常，我所做的是在body标签上放置与控制器和操作匹配的类。然后，在样式表中，您可以包装控制器特定的样式，以便它们不会渗透到应用程序的其他区域。这是我所谈论的一个例子。

在你的布局中：

<body class="<%= params[:controller].parameterize %> <%= params[:action] %>">

在样式表中：

body.sessions.new {
  .main {
    width: 200px;
  }
}

我在Rails中的样式表似乎是重叠的

3 个答案:

以控制器为中心的资产

CSS结构