sass-rails helper“image-url”、“asset-url”在rails 3.2.1中不能工作

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。并将语法更改为:

# 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?

但是得到同样的结果……有人知道这些助手为什么不工作吗?

9 个解决方案

#1

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.png is references in your example.css.scss file with something like:

不管文档怎么说，看起来rails 3.2.6中的默认选项只允许在CSS中使用更少的路径信息。例如. . / app /资产/图片/ rails。png是示例中的引用。scss文件如下:

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

背景:白色的url(rails.png)repeat-y;

You don't include the image-url or asset-url into 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)。这部分文档似乎只是解释了它在后台所做的工作。

#2

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文件时，helper是不可用的。

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

尝试在应用程序中添加以下行。rb(或production.rb):

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

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

我在这篇文章中找到了解决方案，包括在将文件添加到预编译器时对文件命名的问题。

#3

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，确保你改变了你的应用程序。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

See this railscast on 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)

#4

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解析文件。

#5

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/缓存。我对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指令，比如设置变量和计算它们，但仍然有效。我确信有一个非常简单的解释，一旦我有时间去追踪它。

#6

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没有。

#7

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中的spro佝偻病(尽管它是ActionPack的一个依赖项)来解决:

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

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

我不知道为什么，但它现在起作用了。:-)

#8

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

这几天我一直用头撞墙。我唯一的解决办法是:

Make sure sass-rails to your :development group in your Gemfile.
确保将sass-rails发送到Gemfile中的:development group。

If that doesn't fix it, add the following to a new file in config/initializers/ called something like "horrible_sass_patch.rb":

如果没有修复，可以在配置/初始化器中添加以下内容到一个新文件中，并将其命名为“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加载机制，即应用程序。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

#9

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

您可以向路径添加一个斜杠/并像通常那样使用url。

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

#1