Rails引入Bootstrap后报错Undefined variable $alert-padding-y如何解决

问题原因 #

$alert-padding-y是Bootstrap内置的全局变量，出现未定义报错是两个配置错误导致的：

• 混用了Sprockets的require指令和SCSS的@import指令，require_tree .会将app/assets/stylesheets下所有SCSS文件单独提前编译，Bootstrap组件文件单独编译时没有加载全局变量定义，因此找不到变量
• 手动覆盖了Rails默认的资产预编译规则，导致SCSS文件没有被正确纳入编译链处理

解决步骤 #

1. 修正application.scss配置，完全删除顶部的manifest注释段及所有require相关指令，仅保留@import相关逻辑，避免两种引入方式混用：

// 自定义Bootstrap变量请写在@import "bootstrap"之前
@import "bootstrap";

如果有全局自定义样式，可以在文件末尾追加，或者新建独立scss文件后在@import "bootstrap"之后引入即可。

2. 修正application.rb配置，删除你新增的两行config.assets.precompile相关代码（包括注释行），Rails默认的预编译规则已经支持自动处理SCSS、JS文件，手动覆盖反而会破坏默认编译逻辑。

3. 清理本地资产缓存后重启服务：
   执行命令：
   rails tmp:cache:clear assets:clobber
   重启Rails服务即可解决报错。

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