Question

我的application.css是

 *= require_self
 *= require 'main.css'
 *= require 'styles.css'
 *= require 'jquery.ui'
 *= require 'main.css.erb'
 */

但不包含main.css.erb，其中包含

 background-image: url(<%= asset_data_uri 'data.png' %>) !important;

我的主页是

<%= stylesheet_link_tag  'application', :media => "all",'data-turbolinks-track' => true %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>

我不想在*= require_tree.中使用application.css，以便特定于页面的css保持彼此独立。

如何在main.css.erb感谢RAILS 4 production开发和资产管道中使用{{1}}。

Answer 1

这是因为你有2个main.css。

尝试将代码更改为：

*= require_self
 *= require main
 *= require styles
 *= require jquery.ui

Answer 2

我不想使用* = require_tree。在application.css中使页面具体的css将保持彼此分开。

在这种情况下，为什么不直接在layout中包含该文件：

<%= stylesheet_link_tag  'application', 'main', :media => "all",'data-turbolinks-track' => true %>

这将允许您单独包含CSS文件，无论是在开发中还是在开发中。生产

当然，这个建议正在打折命名＆amp;您遇到的文件扩展名问题：

Precompile

在生产环境中，Sprockets使用指纹识别方案概述如上。默认情况下，Rails假定资产已经过预编译并将由您的网络服务器作为静态资产提供。

您提到要将文件与其他CSS分开。 require_tree与require完全相同 - 它会在application.css文件中调用包含的文件。

这没有任何问题，除非您想单独包含这些文件，否则您需要确保将它们分开。为此，您应该将main分配给预编译数组：

#config/application.rb
config.assets.precompile += ["main.css"]

这意味着当您在生产环境中运行应用程序时，您将能够独立于任何其他文件使用main.css文件。

-

命名

最后，可能最痛苦的是，您需要确保只调用一个文件main。原因是，无论您使用css，erb还是scss，该文件都将始终转换为css文件

这意味着如果你有多个同名文件，Rails会变得混乱（正如你所发现的那样）。要解决此问题，您必须确保能够单独命名所需的文件

-

Preprocessor

最后，正如Sampriti Panda所述，您应该选择在资产管道中使用scss预处理器而不是erb。这样做的主要原因是预处理器允许您预先编译资产而不受惩罚

我将您的erb文件更改为：

#app/assets/stylesheets/main.css.scss .your_element { background-image: asset_url('data.png'); }

这既可以作为动态文件也可以作为静态文件

Answer 3

您有main.css和main.css.erb档案吗？如果是这样，那么这两个文件对于链轮是相同的，因此只包括第一个（main.css）。

重命名其中一个文件并删除清单文件中的文件扩展名，即：

*= require_self
*= require main
*= require styles
*= require jquery.ui
*= require main2

Answer 4

来自https://stackoverflow.com/a/10075329/1466095

从rails 3.1资产管道可以让你在里面使用资产助手你的css文件。 css解析器没有绑定控制器/动作范围，但ruby解析器现在能够解决一些问题，如图像路径参考

因此，您可以在main.css.scss目录中将其重命名为app/assets/stylesheets，它应该可以正常工作。

我如何在application.css中需要main.css.erb

4 个答案: