如何在 application.css 中要求 main.css.erb答案

【问题标题】：How do I require main.css.erb in application.css如何在 application.css 中要求 main.css.erb
【发布时间】：2014-08-02 10:14:31
【问题描述】：

我的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 %>

我不想在application.css 中使用*= require_tree.，这样页面特定的css 将保持相互分离。

我如何在RAILS 4 中使用main.css.erb production 中的开发和资产管道，谢谢。

【问题讨论】：

标签： css ruby-on-rails ruby-on-rails-3 ruby-on-rails-4 asset-pipeline

【解决方案1】：

我不想使用 *= require_tree。在 application.css 中，以便该页面特定的 CSS 将彼此分开。

既然如此，为什么不直接将文件包含在layout 中：

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

这将允许您在开发和生产中单独包含 CSS 文件。

当然，此建议忽略了您遇到的命名和文件扩展名问题：

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');
}

这将作为一个动态和静态文件工作

【讨论】：

【解决方案2】：

这是因为您包含了 2 个 main.css。

试着把你的代码改成这样：

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

【讨论】：

【解决方案3】：

您有main.css 和main.css.erb 文件吗？如果是这样，那么这两个文件对于 sprocket 来说是相同的，因此只包含第一个 (main.css)。

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

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

【讨论】：

【解决方案4】：

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

从 rails 3.1 资产管道，您可以在内部使用资产助手你的 CSS 文件。 css 解析器未绑定控制器/动作范围，但 ruby 解析器现在能够解决一些问题，例如图片路径参考

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

【讨论】：