Rails 6用最新Bootstrap Gem执行assets:precompile时遇SassC::SyntaxError

问题分析 #

从你给出的错误栈和语法提示来看，核心问题有两个：

1. 语法混用错误：你在代码里写了--$danger: #cc101d;这种混合写法——这是把Sass变量（$开头）和CSS自定义属性（--开头）搞混了，Sass解析器完全无法识别这种格式，预期这里应该是闭合的}或者合法的Sass语法。
2. 版本兼容问题：你用的是新版Bootstrap（大概率是v5+），但Rails 6默认的sprockets-3.7.2和sassc-2.2.0对Bootstrap 5大量使用的CSS变量语法支持不完善，即使没有语法错误，也可能触发解析异常。

具体解决步骤 #

第一步：修复直接的语法错误

先找到你自定义Bootstrap变量的文件（通常是app/assets/stylesheets/_variables.scss或者类似文件），把错误的--$danger: #cc101d;改成正确的格式：

• 如果是定义Sass变量（给Bootstrap用）：$danger: #cc101d;
• 如果是定义CSS自定义属性（给前端直接用）：--bs-danger: #cc101d;（Bootstrap 5的CSS变量都是--bs-前缀）

第二步：根据需求选择版本兼容方案

方案A：保留Bootstrap 5，升级前端依赖

如果你想继续用新版Bootstrap，需要升级Rails的前端处理工具：

1. 修改Gemfile：

   gem 'sprockets', '~> 4.0'
   gem 'sassc', '~> 2.4.0'
   

2. 执行依赖更新：

   bundle update sprockets sassc
   

3. 确认Bootstrap的导入方式正确：在application.scss里用标准导入：

   @import "bootstrap";
   

   （不要用旧的@import "bootstrap/bootstrap";这种路径）

方案B：降级Bootstrap到兼容版本

如果不想升级Rails依赖，把Bootstrap降到支持Sprockets 3的v4.x版本：

1. 修改Gemfile：

   gem 'bootstrap', '~> 4.6.0'
   

2. 执行依赖更新：

   bundle update bootstrap
   

3. 调整你的自定义Sass代码，移除Bootstrap 5特有的CSS变量语法，全部改用Sass变量（$开头）。

第三步：重新预编译资产

完成上述修改后，再次执行：

rails assets:precompile

附错误信息原文 #

SassC::SyntaxError：错误信息为stdin第3784行19列处，“...-inverse: #fff;”之后的CSS无效，预期为“}”，实际为“--$danger: #cc101d;”
错误栈：
stdin:3784 /Users/alex/.rvm/gems/ruby-2.5.3/gems/sassc-2.2.0/lib/sassc/engine.rb:49:in `render' 
/Users/alex/.rvm/gems/ruby-2.5.3/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call' 
/Users/alex/.rvm/gems/ruby-2.5.3/gems/sprockets-3.7.2/lib/sprockets/sass_compressor.rb:28:in `call' 
/Users/alex/.rvm/gems/ruby-2.5.3/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:75:in `call_processor'

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