UnoCSS不是Sass替代品，而是原子化样式生成引擎：它不解析SCSS文件，需彻底移除sass-loader、lang="scss"及@import，重写theme()调用和extend配置，并统一重置样式与CSS变量。
不能靠“删掉 sass、装上 unocss 就完事”——UnoCSS 不是 Sass 的替代编译器，而是完全不同的样式生成范式。它不解析 SCSS 文件，也不执行 @import 或 @mixin，直接保留旧 Sass 代码会导致构建链路断裂、类名失效、主题变量丢失，甚至样式重复注入。
UnoCSS 不处理 .scss 文件，必须切断 Sass 构建链路
UnoCSS 是 Vite 插件驱动的原子引擎，它只扫描源码中的 HTML/JSX/Vue 模板里的类名（如 text-red-500），然后按需生成 CSS；它对 .scss 文件完全无感。如果你还留着 sass-loader 或 @vue/compiler-sfc 的 lang="scss" 块，它们会继续走旧编译流程，和 UnoCSS 并行产出两套样式，最终导致：
- 同一组件里
bg-blue-500和.btn { @apply bg-blue-500 }行为不一致（前者生效，后者报错或静默忽略） -
@import "variables.scss"里的$color-primary在@apply中不可用，因为 UnoCSS 不读取 SCSS 变量 - 构建产物中同时存在
style.css（Sass 编译出）和uno.css（UnoCSS 生成），优先级冲突、重置样式叠加
必须做三件事：npm uninstall sass sass-loader（或 node-sass）、删掉所有 lang="scss" 和 @import "*.scss"、禁用 Webpack/Vite 中所有 Sass 相关 loader 配置。
类名能照用，但 theme() 和自定义扩展要重写
preset-wind3 确实兼容大部分 Tailwind v3 类名（sm:px-4、dark:bg-gray-800、hover:underline），但老项目若在 Sass 中重度依赖 theme() 函数或 extend 配置，就得手动迁移：
-
theme('colors.primary')在 SCSS 里可能来自tailwind.config.js或自定义_variables.scss，UnoCSS 中必须改写成字符串路径访问：theme('colors.primary')有效，但theme(colors.primary)（解构写法）会报错 -
extend里的断点、颜色、间距等，不能再写在tailwind.config.js；得新建uno.config.ts，在theme字段里声明：theme: { colors: { primary: '#2563eb' }, breakpoints: { sm: '640px' } } -
bg-gradient-to-r这类快捷类默认关闭，需在presets中显式启用：import { presetWind } from '@unocss/preset-wind3'; presetWind({ gradient: true })
样式重置和 CSS 变量必须手动对齐
Tailwind 的 @tailwind base 注入 Preflight，而 preset-wind3 默认不带重置逻辑。如果沿用旧项目的 @import "tailwindcss/base"，再加 @import "@unocss/reset/tailwind-compat.css"，会导致边框、字体、列表样式被重置两次，视觉异常加倍。
- 删掉所有
@import "tailwindcss/base"、@layer base、@import "normalize.css"等重置相关语句 - 只保留一行：
@import "@unocss/reset/tailwind-compat.css"，放在全局 CSS 入口最顶部 - 若项目用了
--tw-border-opacity这类 Tailwind CSS 变量，在 JS 中动态修改，得同步迁移到 UnoCSS 命名：--un-border-opacity（否则无效）
开发体验断连？插件和缓存比语法更关键
VS Code 里 text-red-500 不高亮、不补全，不是配置错了，是插件没切过去：
- 卸载
Tailwind CSS IntelliSense插件（它不识别 UnoCSS） - 安装官方
UnoCSS插件（VS Code Marketplace 搜索即可） - 确保项目根目录有
uno.config.ts，且其中包含preset-wind3()，插件才能加载类名提示 - 最常被忽略的坑：Vite dev server 缓存残留。改完配置后必须清掉
node_modules/.vite和unocss/*，否则旧规则还在内存里跑，重启服务也无效
真正卡住迁移进度的，往往不是语法转换，而是构建缓存没清干净、插件没换对、重置样式叠了两层——这些地方一错，整个页面就看起来“好像动了，又好像没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
