Rails 6部署Heroku失败：引入SCSS致application.js报错求助

问题定位 #

从报错栈能看出，是postcss-custom-properties插件解析app/javascript/stylesheets/application.scss时触发语法错误，具体在文件第6行的65128列。大概率是SCSS里的CSS变量写法不规范，或是postcss相关插件版本兼容性问题导致解析失败。

可行解决方案 #

1. 排查并修复SCSS语法问题 #

• 打开application.scss定位到第6行附近，重点检查CSS变量的定义/使用：比如是否出现var(--color: red)这类错误写法，正确格式应为定义时--color: red;，调用时var(--color)。
• 如果是第三方样式（比如Bootstrap）引发的冲突，直接在package.json锁定兼容版本：

  "dependencies": {
    "bootstrap": "^4.6.0",
    "postcss": "^7.0.36",
    "postcss-custom-properties": "^9.1.1",
    "postcss-loader": "^4.3.0"
  }
  

  执行yarn install更新依赖后重新部署。

2. 调整Webpacker的PostCSS配置 #

编辑config/webpack/environment.js，修改postcss插件配置，禁用冲突模块或调整参数：

const { environment } = require('@rails/webpacker')
const postcssLoader = environment.loaders.get('postcss')
const postcssOptions = postcssLoader.options.postcssOptions

postcssOptions.plugins = [
  require('postcss-import'),
  require('postcss-flexbugs-fixes'),
  require('postcss-preset-env')({
    autoprefixer: {
      flexbox: 'no-2009'
    },
    stage: 3,
    // 禁用导致解析错误的custom-properties插件
    features: {
      'custom-properties': false
    }
  })
]

module.exports = environment

注意：禁用custom-properties后，要确保样式中没有依赖未编译的CSS变量，可改用SCSS变量替代。

3. 替换样式导入方式 #

把application.js里的import 'stylesheets/application';改成明确后缀的require语句：

// 替换原import语句
require('../stylesheets/application.scss');

4. 清理Heroku缓存后重新部署 #

旧依赖缓存可能引发异常，部署前执行：

heroku config:set NODE_MODULES_CACHE=false
git commit --allow-empty -m "Clear Heroku cache"
git push heroku main

部署完成后可重新开启缓存：heroku config:set NODE_MODULES_CACHE=true

本地验证步骤 #

先在本地模拟生产环境编译，提前排查问题：

RAILS_ENV=production rails assets:precompile

确认本地编译无错后再推送到Heroku。

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