推送Rails应用到Heroku时application.scss报语法错误如何解决？

定位步骤 #

• 优先本地复现错误：直接在本地执行bin/webpack（Webpacker环境）或yarn build:css（jsbundling+cssbundling环境），无需每次推送Heroku验证，排查效率更高。
• 检查依赖版本兼容性：该报错为postcss-loader解析SCSS时触发语法错误，常见原因是Bootstrap版本与postcss版本不匹配。Bootstrap 5.2及以上版本要求postcss版本≥8.x，若项目中postcss仍为7.x版本会直接触发该解析错误。
• 验证导入路径兼容性：代码中的~前缀是旧版Webpacker的依赖路径别名，若Rails版本升级为使用jsbundling-rails/cssbundling-rails作为前端构建方案，该别名已失效，会导致路径解析错误。

解决方法 #

1. 修复依赖版本不兼容问题
   在项目根目录执行以下命令升级postcss相关依赖到匹配版本：

yarn add postcss@latest postcss-loader@latest autoprefixer@latest

删除旧依赖缓存与锁文件后重新安装依赖：

rm -rf node_modules yarn.lock
yarn install

2. 修正SCSS导入路径
   删除所有导入路径前的~前缀，修改后的application.scss示例如下：

// @import "bootswatch/dist/darkly/variables";
@import "bootstrap/scss/bootstrap";
// @import "bootswatch/dist/darkly/bootswatch";

// @import "trix/dist/trix";

// @import "custom"

3. 调整Heroku构建顺序
   确保Heroku构建时先安装Node.js依赖再安装Ruby依赖，执行以下命令调整buildpack顺序：

heroku buildpacks:add --index 1 heroku/nodejs
heroku buildpacks:add --index 2 heroku/ruby

配置完成后重新推送代码到Heroku即可。

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