Rails CSS 样式表相互覆盖 [英] Rails CSS stylesheets overriding each other

问题描述

我在 assets/stylesheets 位置有一个 clients.css 和 jobs.css.

I have a clients.css and jobs.css in the assets/stylesheets location.

每个都有各自的控制器.乔布斯是在客户之后使用脚手架创建的.scaffolds.scss 文件是空白的.

Each has a respective controller. Jobs was created with a scaffold after clients. The scaffolds.scss file is blank.

application.css 为空

application.css is blank

当我在 jobs.css 中编写诸如 body{color:black} 之类的更改时，它会更改 clients/index.html.erb 视图和 jobs/index.html.erb 视图.

When I code a change such as body{color:black} in the jobs.css, it changes the clients/index.html.erb view and the jobs/index.html.erb view.

这可能是什么原因?我想为作业和客户端使用单独的 .css 文件..

What could be the reason for this? I would like to have separate .css files for jobs and clients..

推荐答案

来自文档:

Sprockets 将所有 JavaScript 文件连接成一个主 .js 文件并将所有 CSS 文件合并到一个主 .css 文件中.

Sprockets concatenates all JavaScript files into one master .js file and all CSS files into one master .css file.

当然，这意味着当您对 jobs.css 进行更改时，您将看到相同的 css 应用于整个应用程序中的每个匹配元素.所有这些单独的 .css 文件都可以帮助您从人的角度而不是从应用程序的角度来组织事物.

What this means, of course, is that when you make a change to jobs.css, you'll see the same css being applied to every matching element throughout your application. All of those separate .css files are there to help you keep things organized from a human perspective, rather than from the perspective of your application.

您可能只想根据您的页面(例如 #body_client 和 #body_job)想出不同的 ID 和类来区分它们，但您可以看到如何随着您的应用不断发展，此命名约定可能会变得笨拙.

You might want to just come up with different IDs and classes depending on your page (like #body_client and #body_job) to differentiate them, but you can see how this naming convention could get unwieldy as your app grows.

拥有单独的资产是可能的，但并非没有痛苦.

Having separate assets is possible, but not without some pain.

在 application.js 中，删除:

//= require_tree

在application.css中，删除:

*= require_tree

在application.html.erb中，添加以下内容:

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

在 config/initializers/assets.rb 创建一个新的初始化文件并添加以下代码:

Create a new initializer file at config/initializers/assets.rb and add the following code:

%w( clients_controller jobs_controller ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css"]
end

这应该可以让您设置单独的每页资产.查看原始博文了解更多详情.

That should get you set up with separate per page assets. Check the original blog post for more details.

这篇关于Rails CSS 样式表相互覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！