使用cssbundling-rails gem时生产环境SCSS文件图片路径404错误问题

问题根因 #

你使用原生sass直接编译scss文件，没有接入Rails Asset Pipeline的资源路径处理逻辑，生产环境预编译静态资源时会给所有资源添加哈希指纹做缓存淘汰，而sass编译时不会自动替换路径为带哈希的版本，因此出现404。开发环境默认关闭资源指纹，所以可以正常访问。

推荐解决方案（使用PostCSS处理路径） #

这是cssbundling-rails官方推荐的资源路径适配方案，操作步骤如下：

• 安装所需依赖

npm install postcss postcss-cli postcss-rails-asset-urls --save-dev

• 项目根目录新建postcss.config.js，添加以下配置：

module.exports = {
  plugins: [
    require('postcss-rails-asset-urls')()
  ]
}

• 修改package.json中的build:css脚本，增加postcss处理步骤：

"scripts": {
  "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css  --no-source-map --load-path=node_modules && postcss ./app/assets/builds/application.css --replace",
  "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds"
}

修改后重新执行生产环境预编译即可，PostCSS会自动将css中所有相对路径的资源引用替换为Rails Asset Pipeline生成的带哈希指纹的正确路径。

替代方案（无需额外依赖） #

如果不想引入PostCSS，可以将需要引用的图片放到public/images目录下，scss中修改引用路径为绝对路径：

.table th .asc-arrow {
  background-image: url(/images/up_arrow.gif);
}

该方案的缺点是资源不会自动带哈希指纹，更新图片后可能出现用户端缓存不更新的问题。

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