Sass/Less 的 @import 是编译期文件合并指令，非 CSS 运行时加载；Sass 已弃用 @import，应改用 @use（模块化隔离）或 @forward（统一导出）；Less 通过 (reference) 等参数控制导入行为；路径别名需显式配置 includePaths，不自动继承构建工具别名。
为什么 @import 在 Sass/Less 里不等于 CSS 的 @import
因为 Sass 和 Less 的 @import 是编译期指令，不是运行时加载——它会把目标文件内容直接插入当前文件，再一起编译成单个 CSS。你写 @import "vars"，实际效果接近“把 vars.scss 的全部内容复制粘贴到这儿”。这和浏览器里 CSS 的 @import（触发额外 HTTP 请求、影响渲染阻塞）完全不是一回事。
常见错误现象：
– 开发时样式生效，上线后部分样式丢失
– 修改了 _mixins.scss，但对应 CSS 没更新（缓存或构建未触发重编译）
– 报错 File to import not found or unreadable: _reset，但文件明明存在
- 路径必须相对于当前文件，不是相对于项目根目录（除非配置了
includePaths） - Sass 默认只识别以
_开头的文件为“partial”，@import "_reset"和@import "reset"都行，但后者更常见；Less 没这个约定，_纯属命名习惯 - 不要在
.css文件里混用预处理器@import，它会被当普通 CSS 处理，导致语法错误
Sass 的 @import 已被弃用，该用 @use 还是 @forward？
从 Sass 4.0（2019 年）起，@import 就标记为 deprecated；Dart Sass 2.0+ 已彻底移除。继续用会报 warning，未来构建直接失败。
替代方案不是“换写法”，而是改逻辑：@use 引入模块并隔离命名空间（推荐用于工具类、函数、变量）@forward 转发模块（适合构建设计系统，把多个 _button.scss、_form.scss 统一导出到 index.scss）
立即学习“前端免费学习笔记（深入）”；
-
@use "src/styles/vars" as v→ 变量要写成v.$primary-color，避免全局污染 -
@forward "src/styles/mixins"→ 外部@use "index" as i后可直接用i.text-truncate() - 不能混用
@use和@import在同一文件里；已有项目迁移需批量替换，且所有依赖模块都得支持新语法
Less 的 @import 怎么控制合并行为？
Less 的 @import 更灵活，靠参数控制是否内联、是否引用、是否异步——但这些参数只在 Less 编译阶段起作用，不会生成对应 CSS 规则。
-
@import (reference) "reset.less"：只加载变量/mixin，不输出 CSS（适合定义但不渲染的基础模块） -
@import (inline) "normalize.css"：原样插入内容，不解析 Less 语法（用来引入第三方纯 CSS） -
@import (multiple) "theme.less"：允许重复导入（解决循环依赖场景，但慎用） - 没加参数时默认行为就是“合并编译”，等价于 Sass 的旧
@import
注意：(reference) 不等于 CSS 的 all: unset，它只是编译期开关；一旦用了 (reference)，你就不能指望它生成任何样式规则。
构建工具里路径别名失效？检查 includePaths 或 paths 配置
写 @use "@/styles/vars" 报错？那不是语法问题，是编译器根本找不到路径。Sass/Less 默认不识别 Webpack/Vite 的 @/ 别名，必须显式配置。
- Sass（Dart Sass）：在
sass.renderSync({ includePaths: ["src/styles"] })或 CLI 的--load-path=src/styles - Less：通过
paths: ["src/styles"]传给less.render()，或在 Webpack 的less-loader里配options.paths - Vite 用户容易忽略：Vite 内置的 Sass 支持不自动继承
resolve.alias，必须手动加css.preprocessorOptions.sass.includePaths
最常被忽略的一点：路径配置只影响 @import/@use，不影响 CSS 原生 @import url(...)，后者永远走相对路径或绝对 URL。
