Sass使用疑问：能否混合CSS自有样式与Sass变量？

问题1：SCSS文件需要单独作为额外CSS源引入吗？ #

不用。浏览器不识别SCSS语法，必须先把SCSS编译成普通CSS文件，最终只需要引入编译后的CSS就行。你之前遇到main.css被覆盖，是因为编译时把输出路径设成了已有的main.css，直接把原有内容冲掉了——这是编译配置的问题，不是必须要单独引入SCSS。

问题2：怎么把自有CSS样式和Sass变量（比如Bootstrap的）混合用？ #

正确姿势是基于Bootstrap的Sass源码做扩展，而不是直接关联已有CSS。具体步骤：

1. 先装Bootstrap 5.3.2的Sass包，比如用npm：npm install bootstrap@5.3.2
2. 新建一个自定义SCSS文件（比如叫custom.scss），按以下结构写：

// 先导入Bootstrap的变量文件，这样就能直接用它的内置变量
@import "../node_modules/bootstrap/scss/variables";

// 要是想改Bootstrap的默认变量，直接在这里重写就行，比如改主题色
$primary: #2563eb;

// 导入Bootstrap的完整样式（如果需要用它的组件的话）
@import "../node_modules/bootstrap/scss/bootstrap";

// 接下来写你的自有样式，这里随便混用Bootstrap变量或自己的变量
.my-custom-box {
  background-color: $primary;
  padding: $spacer * 2; // 用Bootstrap的间距变量
  border-radius: $border-radius-lg;
}

3. 编译这个custom.scss到一个新的CSS文件（比如custom.css），别用已有的main.css当输出目标
4. 最后在HTML里同时引入main.css（你的原有样式）和custom.css（Bootstrap+自定义混合样式），注意顺序：先引main.css，再引custom.css，这样自定义样式能覆盖原有冲突样式

额外提醒：避免编译覆盖的小技巧 #

• 编译SCSS时，指定独立的输出文件名，别和现有CSS重名
• 要是想把原有main.css的内容合并到SCSS里，要么把代码复制到custom.scss里，要么用@import "main.css";（必须加.css后缀，不然Sass会把它当成SCSS文件解析）

内容的提问来源于stack exchange，提问作者Jeferson Carreño