使用Rails 3.1时如何在Sass中使用参考图像？

| 我有一个Rails 3.1项目，资产管道运行良好。问题是我需要在Sass中引用图像，但是Rails会计算图像URL。 （这在生产中尤为重要，Rails在生产中将图像的Git哈希值附加到其文件名中以将其添加到胸围缓存中。） 例如，在
app/assets/stylesheets/todos.css.scss
中： 
.button.checkable { background-image: url(/assets/tick.png); }
当我部署（或运行
rake assets:precompile
）时，文件
app/assets/images/tick.png
将移至
public/assets/tick-48fe85c0a.png
或类似的文件。这会破坏CSS。这篇文章提出了两个建议： 不要将素材资源管道用于图片-而是将它们放在ѭ5中并直接引用 在您的CSS中使用ERB，并让Rails计算出图像URL。 1号肯定是有可能的，尽管这意味着我不会在图像上缓存被破坏。数字2出局是因为我正在使用Sass，而不是ERB来处理文件。     
2020-02-24 7 条评论
分享

没有找到相关结果

    已邀请:

    奥李

            以下应该可以解决问题： 
    .button.checkable { background-image: url(image_path(\'tick.png\')); }
    实际上，Rails提供了一堆帮助程序来引用资产： 
    image-url(\'asset_name\')
audio-path(\'asset_name\')
    一般来说 
    [asset_type]-url(\'asset_name\') #Becomes url(\'assets/asset_name\')
[asset_type]-path(\'asset_name\') #Becomes \'assets/asset_name\'
    asset_type可以是以下之一：图像，字体，视频，音频，javascript，样式表     
    2020-02-24 0 0
    分享

    犀寺扦

            sass-rails gem定义了可从Sass使用而无需ERB处理的Sass函数。 https://github.com/rails/sass-rails     
    2020-02-24 0 0
    分享

    目浆搽

            对于那些赞成为用户提供更快的加载时间的用户，我建议遵循Steve Souders的技巧在base64中的CSS中加载图像。 asset-data-url（\'path \'） https://github.com/rails/sass-rails#asset-helpers     
    2020-02-24 0 0
    分享

    岭取

            选项2的变体将起作用。如果您有这样的事情： 
    app/assets/stylesheets/pancakes_house.css.less.erb
    然后您将文件
    require
    入
    application.css
    文件。然后
    pancakes_house
    首先通过ERB，该输出通过LESS处理器，然后输出的任何数据都将进入CSS。将ERB放入SCSS可能会有些奇怪，但是，嘿，它可以正常工作并且完成工作而不会产生太多怪异。 因此，您应该能够找到必要的方法，以通过ERB生成消除缓存的图像路径。 我只用一个Less文件尝试过此操作，但它也应与
    .css.scss.erb
    一起使用。 顺便说一句，您还可以向SASS添加自己的功能：   可从SassScript上下文访问此模块中的方法。例如，你可以写 
    $color = hsl(120deg, 100%, 50%)
         它将被称为
    Sass::Script::Functions#hsl
    。 甚至在手册中甚至还有一些关于编写自己的函数的说明。但是，我不确定如何获取Sprockets来加载您的
    Sass::Script::Functions
    补丁程序，因此我不能称其为实用的解决方案。拥有比我更强大的Sprocket Fu的人也许可以使这种方法行之有效，而且我称其比ERBified SCSS更优雅。     
    2020-02-24 0 0
    分享

    扇献隙

            您可以轻松使用Number 2，只需在
    .scss
    文件中添加
    .erb
    扩展名即可： 
    app/assets/stylesheets/todos.css.scss.erb
    并使用
    asset_path
    方法获取带有哈希值的图像的路径： 
    .button.checkable { background-image: url(\'<%= asset_path \'tick.png\' %>\'); }
    该文件将由erb处理，然后由sass处理。     
    2020-02-24 0 0
    分享

    傻零凰死授

            使用资产管道时，必须重新编写资产路径，并且sass-rails为以下资产类别提供-url和-path帮助器（在Sass中带连字符，在Ruby中加划线）：图像，字体，视频，音频，JavaScript和样式表。 image-url（\“ rails.png \”）返回url（/assets/rails.png）    image-path（\“ rails.png \”）返回\“ / assets / rails.png \” 也可以使用更通用的形式： asset-url（\“ rails.png \”）返回url（/assets/rails.png）    asset-path（\“ rails.png \”）返回\“ / assets / rails.png \”     
    2020-02-24 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.047814130783081