旧版CSS转SCSS方法：工具+脚本快速转换

将旧版CSS迁移到SCSS远不止简单修改文件后缀，而是一项需兼顾语法兼容、路径引用、构建配置与项目上下文的系统性工程——从sass-convert批量转换到Angular配置项的三处关键更新，再到警惕在线工具的局限性和隐式样式依赖带来的“静默失效”，本文直击迁移中极易被忽视却导致编译失败或样式丢失的核心陷阱，帮你避开踩坑、高效启用SCSS全部能力。

直接重命名 .css 文件为 .scss 是最快速的起点，但仅靠这一步无法真正启用 SCSS 功能，反而容易引发编译错误或样式失效。真正的转换必须包含三件事：文件后缀变更、引用路径同步更新、以及对原始 CSS 语法做最小兼容性适配。

为什么不能只改后缀就完事

SCSS 解析器比 CSS 严格得多。哪怕只是多了一个空行、少了一个分号（虽然 SCSS 允许省略分号），或用了 @import 加载纯 CSS 文件但没加引号和扩展名，都会导致构建失败。Angular 或 Webpack 等工具在读取 styleUrls 或 styles 配置时，会把 .scss 当作需要预处理的资源，一旦内容不符合 SCSS 语法规则，就会报类似 Invalid CSS after "...": expected "{", was "body" 这样的错误。

• 原始 CSS 中的 @import "reset.css" 必须改为 @import "reset";（去掉扩展名，且路径需可解析）
• 所有变量、嵌套、@mixin 都是“按需启用”的——不写就不会触发，但也不代表旧代码能无损运行
• 某些构建工具（如旧版 Angular CLI）默认不开启 stylePreprocessorOptions.includePaths，导致 @import 查找不到相对路径下的 partial 文件

用 sass-convert 批量处理已有 CSS 文件

sass-convert 是 Sass 官方早期提供的命令行工具，虽已归档但仍可稳定使用（v3.5.7 及以前）。它不只改后缀，还会自动将嵌套选择器、重复声明合并、变量提取等基础逻辑转成 SCSS 风格。注意：它不会帮你写 @mixin 或重构架构，但能避免手改出错。

• 安装：npm install -g sass@1.77.6（指定兼容版本，新版 sass 已移除 sass-convert）
• 转换单个文件：sass-convert style.css style.scss
• 批量转换整个目录（保留结构）：find src -name "*.css" -exec sass-convert {} {}.tmp \; -exec sh -c 'mv "$1".tmp "${1%.css}.scss"' _ {} \;
• ⚠️ 转换后务必检查 @import 路径——它默认不重写路径，仍需手动补全或调整 includePaths

在线工具仅适合小片段验证，别信“一键全量转换”

像 css2sass.com 或 VS Code 插件 CSS to SCSS Converter 这类工具，对单个组件样式块（