sass-rails 助手“image-url”、“asset-url”在 rails 3.2.1 中不起作用
Posted
技术标签:
【中文标题】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 【发布时间】:2012-03-07 10:58:24 【问题描述】:我在 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');
但得到相同的结果...有人知道为什么这些助手不起作用吗?
【问题讨论】:
您找到解决方案了吗? 我的项目有 2 个样式表(一个用于网页,一个用于应用程序)。我在一个上遇到这个问题,但在另一个上没有? 【参考方案1】:您可以像往常一样在路径中添加一个尾部正斜杠/
并使用url
。
background-image: url("/assets/rails.png")
【讨论】:
【参考方案2】:这几天我一直在努力解决这个问题。唯一对我有用的解决方案如下:
-
确保 sass-rails 与 Gemfile 中的 :development 组一致。
如果这不能解决问题,请将以下内容添加到 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
【讨论】:
【参考方案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)
【讨论】:
一旦你使用 Rails 4,你会想要回到使用 Bundler.require(:default, Rails.env) 的旧方式。见railscasts.com/episodes/415-upgrading-to-rails-4。【参考方案4】:我进行了@Ryan 建议的更改,以及升级 sass-rails:
bundle update sass-rails
sass 3.2.6 对我有用,而 3.2.5 没有。
【讨论】:
【参考方案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)
。那段文档似乎只是对它在后台所做的事情的解释。
【讨论】:
仅使用url(rails.png)
不会使用资产文件的指纹版本。在我们的 .css.scss 文件中,我们需要使用background: image_url('my-image.png')
。
如果您需要获取指纹输出,请确保不要这样做:rake assets:precompile
。您需要设置生产环境,例如RAILS_ENV=production rake assets:precompile
,否则它只会生成开发模式的资产链接。
^^ 那条评论!救了我几个小时的头痛RAILS_ENV=production rake assets:precompile
最后一个好答案:只需使用 url(your_image.png)。谢谢@Jay H.
将 css 转换为 scss 可能会有所帮助并在 application.scss 中使用 @import【参考方案6】:
我们刚刚遇到了同样的问题,并通过在 Gemfile 中明确要求链轮来解决它(即使它是 ActionPack 的依赖项):
group :assets do
gem 'sprockets'
gem 'sass-rails', '~> 3.2.3'
# ...
end
我不知道为什么,但它现在有效。 ;-)
【讨论】:
【参考方案7】:当我遇到这个问题时,是因为我没有在资产管道中包含 css 文件以进行预编译。因此,它将在运行时生成。因为 sass-rails gem 通常位于 :assets 组中,所以在运行时生成 css 文件时,助手不可用。
尝试将以下行添加到您的 application.rb(或 production.rb):
config.assets.precompile += %w( public/omg.css )
我在this post 上找到了修复,包括在将文件添加到预编译器时命名文件的问题。
【讨论】:
【参考方案8】:您可能想尝试清除 /tmp/cache。我对 Rails 和 Sass 太陌生了,不知道为什么会这样,但经过数小时的搜索,它为我解决了同样的问题。
顺便说一句,尽管我可以看到其他 Sass 指令(例如设置变量并使用它们进行计算)正在执行,但它仍然有效。我确信有一个非常简单的解释,一旦我有时间追查它。
【讨论】:
【参考方案9】:您是否在application.rb
中启用了资产管道?
config.assets.enabled = true
您将 Sass 样式表上的扩展名设置为 .css.scss
是正确的。这让 Rails 知道在将内容作为 CSS 发出之前先用 Sass 解析文件。
【讨论】:
我在相似的位置创建了一个相似的文件并得到了正确的输出。你的 Gemfile 中有 sass-rails 吗?你能用config/environments/development.rb
的内容更新你原来的帖子吗?以上是关于sass-rails 助手“image-url”、“asset-url”在 rails 3.2.1 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
sass-rails 资产管道:生成图像路径不正确; `url(/images/blah.png)` 而不是 `url(/assets/blah.png)`