sass-rails帮助器“ image-url”，“ asset-url”在rails 3.2.1中不起作用

ruby-on-rails CSS

2020-03-19

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

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

第2302篇《sass-rails帮助器“ image-url”，“ asset-url”在rails 3.2.1中不起作用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
MandyJinJin路易 2020.03.19

您可以仅/在路径后添加斜杠并像平常一样使用url。

background-image: url("/assets/rails.png")
阿飞西门 2020.03.19

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

config.assets.enabled = true

通过将Sass样式表上的扩展名设置为，您做对了.css.scss。这使Rails知道先使用Sass解析文件，然后再将其作为CSS发出内容。

卡卡西 2020.03.19

尽管文档说了什么，但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)。这些文档似乎只是对它在后台执行操作的一种解释。

神无猪猪 2020.03.19

您可能要尝试清除/ tmp / cache。对于Rails和Sass来说，我太陌生了，不知道它为什么起作用，但是经过数小时的搜索，它为我解决了同样的问题。

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

西门ItachiL 2020.03.19

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

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

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

我发现这篇文章中的修复程序，包括在将文件添加到预编译器时命名文件的陷阱。

小宇宙Near 2020.03.19

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

bundle update sass-rails

sass 3.2.6为我工作，而3.2.5却没有。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android