Rails：如何正确避免CSS的循环依赖错误但仍然包含所有文件？

I am new to Rails, and I'm hoping this is a simple question, but I haven't been able to find it here or by Googling around. I've been through several different similar posts but never fully fixed my issue. (The fourth link there, on "posts", is exactly the same problem, but it was never solved or answered.)

我是Rails的新手，我希望这是一个简单的问题，但我无法在这里找到它或通过Google搜索。我经历了几个不同的类似帖子，但从未完全解决我的问题。（那里的第四个链接，在“帖子”上，是完全相同的问题，但它从未得到解决或回答。）

I'm trying to set up a very simple blog application for playing with. All I want to do (for now) is establish a global application.css[.scss is optional] and a page specific post.css[.scss].

我正在尝试设置一个非常简单的博客应用程序来玩。我想要做的就是（现在）建立一个全局application.css [.scss是可选的]和一个特定于页面的post.css [.scss]。

My application.css looks like this:

我的application.css看起来像这样：

//= require_self
//= require_tree .

body {
    background-color: #CCF;
}
#main_content_div {
    width:90%; 
    padding:10px; 
    margin: 15px auto; 
    background-color:#FFF;
}

Pretty straightforward if you ask me.

如果你问我，那很简单。

My post.css.scss looks like this:

我的post.css.scss看起来像这样：

.postlist_row {
    border: 1px solid red;
}

Nothing fancy.

没有什么花哨。

But when I try to visit /posts, I wind up with:

但是当我尝试访问/发布时，我最终会：

Sprockets::CircularDependencyError in Posts#index

The standard SO answer to this seems to be "Well, just remove that require_tree statement. You're using Rails 3 and Sprockets, so that already happens and you're doubly including the same file(s)."

对此的标准SO答案似乎是“好吧，只需删除require_tree语句。你正在使用Rails 3和Sprockets，所以这已经发生了，你加倍包括相同的文件。”

This is probably true. And if I remove that require_tree, application.css works fine. However, and this is where my problem seems to differ from others, it never includes post.css.scss. None of the ruls in it are applied to the page, and it isn't shown in the source.

这可能是真的。如果我删除require_tree，application.css工作正常。但是，这是我的问题似乎与其他问题不同的地方，它从不包括post.css.scss。其中的所有ruls都没有应用于页面，并且未在源中显示。

I don't know enough yet about the pipeline to know for sure what the problem is, whether it's because of the order of my statements or because one is css and the other is scss or something with my configuration... I just have no idea.

我还不知道管道知道问题是什么，无论是因为我的陈述顺序还是因为一个是css而另一个是scss或者我的配置......我只是没有理念。

Any thoughts?

有什么想法吗？

1 个解决方案

#1

If you remove the //= require_tree . then you will need to include controller specific assets yourself.

如果删除// = require_tree。那么你需要自己包含控制器特定的资产。

See http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

见http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

例如，如果您生成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]％>。

Have you done so?

你这样做了吗？

Alternately you might want to leave the //= require_tree . so that your app can serve a single stylesheet for all requests (which the browser can cache after the first page) and use selectors to restrict some styles to specific pages. For example you might add params[:controller] as a class to your page body in your application's layout template so that you can then scope styles to apply only to that controller's views:

或者你可能想要离开// = require_tree。这样您的应用程序可以为所有请求（浏览器可以在第一页之后缓存）提供单个样式表，并使用选择器将某些样式限制为特定页面。例如，您可以将params [：controller]作为类添加到应用程序的布局模板中的页面主体，以便您可以将样式范围仅应用于该控制器的视图：

body.posts {
  .postlist_row {
    border: 1px solid red;
  }
}

#1