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

sass-rails helpers "image-url", "asset-url" are not working in rails 3.2.1

提问by patrick

I am on 3.2.1, with sass-rails-3.2.4 and sass-3.1.15...

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

The documentation for the asset pipeline says:

资产管道的文档说：

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

...

...

So I made the following file:

所以我做了以下文件：

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

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

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

and when I visit localhost:3000/assets/public/omg.css I get:

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

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

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

... I also tried changing the file to omg.css.scss and changed the syntax to:

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

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

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

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

but get the same results... does anyone have any idea why these helpers are not working?

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

采纳答案by Jay H.

Despite what the documentation says, it seems the default options in rails 3.2.6 allow you to just make things work with even less path information in your CSS. E.g. ../app/assets/images/rails.pngis references in your example.css.scss file with something like:

不管文档怎么说，rails 3.2.6 中的默认选项似乎允许你在 CSS 中使用更少的路径信息来工作。例如../app/assets/images/rails.png，在您的 example.css.scss 文件中引用如下内容：

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

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

You don't include the image-urlor asset-urlinto your scss (as far as I know), just plain url(your_image.png). That bit of documentation appears to be just an explanation of what it is doing in the background.

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

回答by Forrest

When I hit this problem, it was because I had not included the css file in the asset pipeline for pre-compilation. As a result, it would be generated at runtime. Because the sass-rails gem is commonly in the :assets group, the helpers are unavailable when generating css files at runtime.

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

Try adding the following line to your application.rb (or production.rb):

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

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

I found the fix on this postincluding a gotcha around naming the files when adding them to the precompiler.

我在这篇文章中找到了修复程序，包括在将文件添加到预编译器时命名文件的问题。

回答by Ryan

If you have updated your app to Rails 3.1 in the past, make sure you changed your application.rb file from

如果您过去已将您的应用程序更新到 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)

to

到

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

See this railscaston upgrading to Rails 3.1 and adding the asset pipeline.

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

Update:Rails 4 goes back to the old way of doing it. Thanks Aaron Gray!

更新：Rails 4 回到了旧的方式。由于阿隆-格雷！

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

回答by Brandan

Have you enabled the asset pipeline in application.rb?

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

config.assets.enabled = true

You did right by setting the extension on your Sass stylesheets to .css.scss. That lets Rails know to parse the file with Sass first before it emits the content as CSS.

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

回答by kburke

You might want to try clearing /tmp/cache. I am too new to Rails and Sass to know why this worked, but it solved the same problem for me after hours of searching.

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

BTW, this worked despite the fact that I could see other Sass directives, such as setting variables and calculating with them, being executed. I'm sure there is a very simple explanation, once I have time to track it down.

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

回答by Steve

I made the change suggested by @Ryan, as well as upgrading sass-rails:

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

bundle update sass-rails

sass 3.2.6 worked for me, while 3.2.5 did not.

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

回答by user208769

I've been banging my head against this for days. The only solution that worked for me was as follows:

几天来我一直在反对这个。对我有用的唯一解决方案如下：

1. Make sure sass-rails to your :development group in your Gemfile.

2. If that doesn't fix it, add the following to a new file in config/initializers/ called something like "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
   

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
   

Note: This requires that you are using the "active" Bundler loading mechanism, i.e. your application.rb uses the following:

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

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

... and if your stylesheets are in vendor, make sure they're included in Sass's configuration:

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

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

回答by iGEL

We just had the same problem and fixed it by explicitly requiring sprockets in the Gemfile (even though it's a dependency of ActionPack):

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

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

I don't know why, but it works now. ;-)

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

回答by Rust

You can just add a trailing forward slash /to the path and use urllike you usually do.

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

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