Ruby on Rails迁移Bootstrap4：移除require_tree后自定义CSS失效

我之前在迁移Rails项目到Bootstrap 4的时候也碰到过一模一样的问题！移除*= require_tree .之后自定义样式全挂了，当时也卡了好一会儿，后来搞清楚了怎么处理，给你几个靠谱的方案：

方案1：手动@import自定义文件（推荐，可控性最强） #

require_tree的问题在于它是按文件系统字母顺序加载所有文件，没法控制顺序——而Bootstrap迁移指南让你移除它，就是为了让你用Sass的@import来精确控制加载顺序（比如自定义变量要在Bootstrap之前加载，自定义样式要在Bootstrap之后加载来覆盖默认样式）。

举个例子，假设你的自定义文件结构是这样的：

app/assets/stylesheets/
├── application.scss
├── custom-variables.scss  # 用来覆盖Bootstrap默认变量
├── layouts/
│   └── header.scss
└── components/
    └── button.scss

那你可以在application.scss里这样写：

// 1. 先导入自定义变量（必须在Bootstrap之前，才能覆盖默认值）
@import "custom-variables";

// 2. 导入Bootstrap核心
@import "bootstrap";

// 3. 按需求导入自定义样式，顺序由你控制
@import "layouts/header";
@import "components/button";

注意：Sass会自动识别同目录下的文件，不用写完整路径，也不用加.scss后缀；如果你的自定义文件是以下划线开头的「部分文件」（比如_custom-variables.scss），同样可以直接@import "custom-variables"，下划线会被自动忽略。

方案2：用Sass Glob批量导入（适合文件多的情况） #

如果你的自定义样式文件特别多，不想一个个手动@import，可以用Sass的Glob语法批量加载整个目录的文件：

比如你把所有自定义样式都放在app/assets/stylesheets/custom/目录下，就可以这么写：

// 先加载变量和Bootstrap
@import "custom-variables";
@import "bootstrap";

// 批量加载custom目录下所有子文件（包括子目录里的文件）
@import "custom/**/*";

不过要注意：Glob是按文件系统顺序加载的，如果你的文件之间有依赖关系（比如A文件用到B文件的变量），最好还是手动控制顺序，或者把依赖文件放在前面命名（比如01-variables.scss）。

方案3：用Sprockets的//= require指令（不推荐，但应急可用） #

如果你实在不想改太多，也可以用Sprockets的//= require指令替代*= require_tree，但要注意在.scss文件里要用双斜杠注释：

// 导入Bootstrap
@import "bootstrap";

// 加载当前目录下所有文件（不递归子目录）
//= require_directory .

// 或者递归加载所有文件（和原来的require_tree效果一样）
//= require_tree .

但不推荐这个方案，因为require是直接拼接文件内容，不会处理Sass的变量、混合宏等特性，容易出现样式冲突或者变量未定义的问题——还是用Sass的@import更符合Bootstrap的最佳实践。

关键注意点 #

• 自定义变量一定要在@import "bootstrap"之前加载，这样才能覆盖Bootstrap的默认变量（比如主题色、字体大小）；
• 尽量用下划线开头的「部分文件」来组织自定义样式，避免这些文件被单独编译成独立的CSS文件；
• 做完修改后，记得重启Rails服务器，或者运行rails assets:precompile（生产环境）来刷新资产管道缓存。

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