使用vite_rails的Rails应用中如何在SCSS文件引用图片？

在使用vite_rails的Rails应用里，CSS中引用app/assets/images下的图片需要遵循Vite的资源解析规则，你之前的写法不生效是因为路径逻辑和传统Sprockets不同，正确做法有两种：

方法一：使用绝对路径 #

vite_rails默认会将app/assets/images作为静态资源目录处理，直接用/assets/开头的绝对路径即可引用：

background-image: url('/assets/my_image.png');

方法二：使用相对路径 #

如果你的application.css.scss位于app/assets/stylesheets目录下，相对于该文件的图片路径应为../images/my_image.png，写法如下：

background-image: url('../images/my_image.png');

注意事项 #

• 不要用images/my_image.png这类路径，Vite会以当前CSS文件所在目录为基准解析，而非传统Sprockets的assets根目录。
• 若习惯用Sass helper，vite_rails替换了原asset-url，可改用vite_asset_url，但直接写路径更简洁。

内容的提问来源于stack exchange，提问作者Petran