dart sass 3.0.0 已发布，@import 会直接报错中断编译；必须立即迁移到 @use/@forward，因其解决全局污染、重复解析、路径不规范及模块封装问题，且 @use 位置与路径有硬性语法约束。
警告不是“可以晚点改”，而是构建系统正在用兼容模式硬扛——Dart Sass 3.0.0 已发布，CI 或本地 npm install 拉到新版后，@import 会直接报错中断编译。
为什么 @import 现在报错但还能编译过去
你当前用的是 Dart Sass 2.x 的兼容模式，它把每个 @import 当作文本粘贴进当前文件，不校验、不隔离、不缓存。这导致：
- 两个
_theme.scss和_vars.scss都定义$spacing，后@import的无条件覆盖前者，DevTools 里只显示最后那个位置，查不到来源 -
@import "mixins"在 6 个组件里各写一次，Sass 就解析 6 次_mixins.scss，热更新变慢、CSS 体积膨胀 - Angular CLI / Vite 升级 minor 版本（如
sass从 1.77.6 → 1.78.0）可能默认启用严格模式，警告秒变Invalid CSS after "@import"
@use 必须写对位置和路径，否则直接编译失败
@use 是语法硬约束，不是可选风格。错位、路径多写扩展名或下划线，都会让编译器拒绝执行：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 必须是 SCSS 文件中第一个非注释、非空行的语句，不能嵌套在
@if、@media或选择器内部 - 路径不带扩展名和下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ - 省略
as时，命名空间默认为文件名（variables.$primary-color），不推荐省略——易与第三方库同名冲突 -
@use "utils" as *是非法语法（Sass ≥5.0 明确禁止），别试图模拟全局行为
@forward 不是“高级 @import”，而是接口封装手段
@forward 出现在入口文件（如 _index.scss）里，只声明“我能透出什么”，不加载内容。它解决的是“每个组件都 @use 十几个基础文件”的组织问题：
- 基础封装：
@forward "variables"; @forward "mixins";，下游只需@use "index" as i;，再用i.$primary-color - 可控暴露：
@forward "zindex" hide $z-index-drawer;可防止下游误改底层变量 - 重命名转发：
@forward "utils" as u-*;把所有成员加u-前缀，彻底规避命名冲突 - 严禁循环：
A @forward B且B @forward A→ 编译报Circular @forward
最容易被忽略的一点：第三方库若仍用 @import，你无法用 @forward 包装它——得等库升级，或自己 fork 后手动改写。迁移不是替换关键字，而是重建模块边界；一旦漏掉某个 @use 路径没加命名空间，或者 @forward 忘了 show 关键成员，样式就会静默失效，且毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
