sass-rails 助手“image-url”、“asset-url”在 rails 3.2.1 中不起作用

Question

我在 3.2.1，使用 sass-rails-3.2.4 和 sass-3.1.15...

资产管道的文档说：

asset-url("rails.png", image) becomes url(/assets/rails.png)
image-url("rails.png") becomes url(/assets/rails.png)

...

于是我制作了以下文件：

# app/assets/stylesheets/public/omg.css.sass

body
  background: asset-url('snake.gif', image)

#lol
  background: image-url('snake.gif')

当我访问 localhost:3000/assets/public/omg.css 我得到：

body {
  background: asset-url("snake.gif", image); }

#lol {
  background: image-url("snake.gif"); }

...我也尝试将文件更改为 omg.css.scss 并将语法更改为：

# app/assets/stylesheets/public/omg.css.scss

body {
  background: asset-url('snake.gif', image);
}

#lol {
  background: image-url('snake.gif');
}

但得到相同的结果...有人知道为什么这些助手不起作用吗？

Answer 1

您可以像往常一样在路径中添加一个尾部正斜杠/ 并使用url。

background-image: url("/assets/rails.png")

Answer 2

这几天我一直在努力解决这个问题。唯一对我有用的解决方案如下：

1. 确保 sass-rails 与 Gemfile 中的 :development 组一致。

2. 如果这不能解决问题，请将以下内容添加到 config/initializers/ 中名为“horrible_sass_patch.rb”的新文件中：

   begin
     require 'sass-rails'
   rescue
   end
   
   if Class.const_defined? "Sass::Script::Functions"
     module Sass::Script::Functions
       # This function exists, but doesn't automatically register
       declare :asset_url, [:value]
       declare :image_url, [:value]
       declare :font_url, [:value]
       # ... etc
     end
   end
   

注意：这要求您使用“活动”的 Bundler 加载机制，即您的 application.rb 使用以下内容：

Bundler.require *Rails.groups(:assets => %w(development test))

...如果您的样式表在供应商中，请确保它们包含在 Sass 的配置中：

if config.respond_to? :sass
  config.sass.load_paths << Rails.root.join('vendor', 'assets', 'stylesheets')
end

Answer 3

如果您过去已将应用更新到 Rails 3.1，请确保您将 application.rb 文件从

# If you have a Gemfile, require the gems listed there, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env) if defined?(Bundler)

到

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require *Rails.groups(:assets => %w(development test))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

有关升级到 Rails 3.1 和添加资产管道的信息，请参阅 this railscast。

更新：Rails 4 回到了原来的做法。谢谢亚伦格雷！

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env)

Answer 4

我进行了@Ryan 建议的更改，以及升级 sass-rails：

bundle update sass-rails

sass 3.2.6 对我有用，而 3.2.5 没有。

Answer 5

尽管文档说了什么，但似乎 rails 3.2.6 中的默认选项允许您在 CSS 中使用更少的路径信息来完成工作。 例如。 ../app/assets/images/rails.png 是您的 example.css.scss 文件中的引用，例如：

background: white url(rails.png) repeat-y;

您没有将image-url 或asset-url 包含在您的scss 中（据我所知），只是简单的url(your_image.png)。那段文档似乎只是对它在后台所做的事情的解释。

Answer 6

我们刚刚遇到了同样的问题，并通过在 Gemfile 中明确要求链轮来解决它（即使它是 ActionPack 的依赖项）：

group :assets do
  gem 'sprockets'
  gem 'sass-rails', '~> 3.2.3'
  # ...
end

我不知道为什么，但它现在有效。 ;-)

Answer 7

当我遇到这个问题时，是因为我没有在资产管道中包含 css 文件以进行预编译。因此，它将在运行时生成。因为 sass-rails gem 通常位于 :assets 组中，所以在运行时生成 css 文件时，助手不可用。

尝试将以下行添加到您的 application.rb（或 production.rb）：

config.assets.precompile += %w( public/omg.css )

我在this post 上找到了修复，包括在将文件添加到预编译器时命名文件的问题。

Answer 8

您可能想尝试清除 /tmp/cache。我对 Rails 和 Sass 太陌生了，不知道为什么会这样，但经过数小时的搜索，它为我解决了同样的问题。

顺便说一句，尽管我可以看到其他 Sass 指令（例如设置变量并使用它们进行计算）正在执行，但它仍然有效。我确信有一个非常简单的解释，一旦我有时间追查它。

Answer 9

您是否在application.rb 中启用了资产管道？

config.assets.enabled = true

您将 Sass 样式表上的扩展名设置为 .css.scss 是正确的。这让 Rails 知道在将内容作为 CSS 发出之前先用 Sass 解析文件。