不能只改后缀，因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 这类工具，对单个组件样式块（ 内容）效果尚可，但面对跨文件依赖、全局变量注入、@extend 关系时完全无能为力。它们常把 .btn, .btn-primary 合并成一行，却忽略 SCSS 中更推荐的 %button-base + @extend 模式；也会把 color: #333 直接转成 $color-text: #333，但不告诉你这个变量该定义在哪、是否与其他颜色冲突。
- 适合场景：临时调试某段 hover 动画、快速看嵌套写法长什么样
- 不适合场景：迁移
src/styles.css入口文件、处理含@keyframes和媒体查询嵌套的复杂规则 - 一个硬伤：所有在线工具都无法识别项目上下文，比如你
header nav li a的层级本应拆成_nav.scss和_header.scss，它只会塞进一个大文件
Angular 项目中必须同步修改的三个位置
Angular 对样式后缀敏感，只改文件名而不改配置，会导致 ng serve 启动失败或热更新失效。重点不是“怎么转”，而是“哪里要跟着改”。
-
angular.json中的"styles": ["src/styles.css"]→ 改为"src/styles.scss" -
angular.json中的 schematics 配置："@schematics/angular:component": {"style": "scss"}（控制新组件默认生成.scss） - 每个组件的
@Component({ styleUrls: [...] })—— 不仅要改数组里的字符串后缀，还要确认路径是否仍指向同一目录（例如从./card.css改为./card.scss，而非../card.scss） - ⚠️ 极易被忽略：如果你用
ViewEncapsulation.None或全局样式注入，还需检查styles.scss是否被@import正确引入，否则变量和 mixin 在子组件里不可见
最麻烦的从来不是语法转换，而是那些散落在 HTML 模板里、JS 逻辑中、甚至第三方库文档里的隐式样式依赖——比如某个按钮点击后通过 JS 添加 is-active 类，而这个类的样式还在 legacy.css 里没被迁移。这类问题不会报错，但会让改完的 SCSS 看起来“好像没生效”。动手前先跑一遍 grep -r "class.*active" src/，比盲目转文件更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
