必须立即迁移到@use/@forward，因dart sass 3.0.0已彻底移除@import；当前警告是兼容模式最后缓冲期，ci或依赖升级将致编译失败，且@import导致全局污染、静默覆盖、重复解析。
别用 CSS 的 @import 引入 Sass/Less 文件——它根本不会被预处理器识别，只会原样输出成运行时请求，性能差还容易出错。
为什么 Sass 里写 @import "xxx.scss" 会报错或失效
这不是路径写错的问题，而是 Dart Sass 2.0+ 已彻底移除 @import。如果你看到 File to import not found 或构建直接失败，大概率是用了旧语法且没配兼容模式。
-
@import在 Sass 中从 4.0 起标记为 deprecated，现在默认禁用；必须显式启用 legacy importer 才能用（不推荐） - 即使启用，
@import "vars"和@import "_vars"行为不一致：前者会尝试找vars.scss或vars.sass，后者优先匹配_vars.scss - 路径始终相对于当前文件，不是项目根目录；没配
includePaths时，@import "@/styles/vars"这种写法必然失败 - 混用
@use和@import在同一文件？Sass 直接拒绝编译，报Mixing @use and @import
Sass 中该用 @use 还是 @forward？看你要不要暴露命名空间
@use 是导入并隔离，@forward 是转发并控制可见性——两者不是替代关系，而是配合使用。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 单个组件要复用变量/mixin？用
@use "src/styles/vars" as v，然后写v.$primary-color - 想让外部统一通过
@use "design-system"访问所有按钮、表单、图标样式？在design-system/index.scss里写@forward "button"; @forward "form"; - 需要隐藏某个 mixin 防止误用？
@forward "utils" hide truncate-text，这样别人@use "design-system"后就调不出truncate-text -
@use不支持with参数传配置？错——@use "button" with ($size: "lg")是合法的，前提是button.scss里声明了$size: null !default
Less 的 @import 参数怎么选？关键看要不要内联和是否需引用
Less 的 @import 比 Sass 灵活，但参数只影响编译阶段行为，不生成对应 CSS 规则。
- 想把
_reset.less内容直接合并进当前文件（无额外 HTTP 请求）？写@import (inline) "_reset"; - 只引入 mixins/variables，不输出 CSS？用
@import (reference) "_mixins";，它像 Sass 的@use，但无命名空间 - 需要异步加载（仅限 Less 浏览器编译场景）？
@import (less, async) "theme-dark";，但 Webpack/Vite 构建时这个参数无效 - 路径别名如
@import "@/styles/vars"生效的前提：Less 配置里明确写了paths: ["src/styles"]，否则一律按相对路径解析
真正容易被忽略的点是：Sass 的 @use 和 Less 的 @import (reference) 都不输出 CSS，但它们的变量/mixin 只在当前作用域生效；一旦你忘了加命名空间（Sass）或重复定义同名变量（Less），覆盖和冲突就在所难免——这比路径错误更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
