学习Sass与Bootstrap 4：非Bootstrap样式修改应选哪个.scss文件？

嘿，这个问题核心其实是代码组织的可维护性——两种写法确实都能正常工作，但选哪种取决于你对现有局部文件的职责定位，下面给你拆解下两种场景的最优做法：

情况1：如果_my-theme.scss是你的「自定义样式统一入口」 #

如果从一开始你就把_my-theme.scss定位成存放所有属于你项目的自定义样式（不管是不是和Bootstrap相关），那把page-title这类独立样式放进去完全没问题。这样所有你的自定义代码都集中在一个文件里，后续找修改、加新样式都不用跳来跳去，小项目里这种方式高效又省心。

情况2：如果_my-theme.scss仅用于「覆盖Bootstrap默认样式」 #

如果你的_my-theme.scss原本的职责只是专门用来修改Bootstrap的变量、覆盖Bootstrap自带组件的样式，那更推荐把和Bootstrap无关的独立样式（比如page-title）放到一个新的局部文件里，比如_custom-styles.scss，然后把它导入到site.scss中。

举个清晰的导入顺序例子（这也是Bootstrap + Sass项目的通用最佳实践）：

// 1. 先导入Bootstrap的核心工具（必须在自定义变量前）
@import "bootstrap/functions";
@import "bootstrap/variables";

// 2. 导入你的Bootstrap主题修改（覆盖Bootstrap变量/组件样式）
@import "my-theme";

// 3. 导入独立的自定义样式（和Bootstrap无关的类、全局样式）
@import "custom-styles";

// 4. 最后导入完整的Bootstrap核心代码
@import "bootstrap";

关键原则：保持一致性 #

不管你选哪种方式，坚持统一的规则才是最重要的。别这次把自定义样式丢去site.scss，下次又塞去_my-theme.scss，时间久了自己找代码都会头大。小项目可以灵活点，大项目尽量按职责拆分文件，后期维护会轻松很多。

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