推荐使用预处理器的@use或@import在编译阶段合并文件，避免CSS的@import导致运行时请求；Sass优先用@use导入模块化文件如_variables.scss，Less用@import加选项控制行为，均需正确配置路径并防止重复引入。
在 Sass 或 Less 中引入外部样式文件，不推荐使用 CSS 的 @import 语法，因为它的性能较差，且会在运行时发起额外的 HTTP 请求（尤其是在旧版浏览器中）。现代做法是在预处理器层面使用其原生的 @import 指令，它会在编译阶段将文件合并，生成单一的 CSS 文件。
1. 使用 Sass 引入样式文件
Sass 支持 @import 和 @use（Sass 1.23.0+ 推荐方式）来引入其他 Sass 文件。
@use 'filename'; 将文件作为模块导入，默认变量、mixin 可用。
例如：
@use 'variables'; @use 'mixins'; @use 'base'; // 会自动查找 _base.scss
Sass 会优先加载以 _ 开头的文件（如 _base.scss），这类文件称为“部分文件”，不会单独输出为 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
注意：- 确保文件路径正确，相对路径或配置了 includePaths 的路径都可使用。
-
@use是模块化导入，变量需通过命名空间访问（如variables.$primary-color）。 - 若想兼容旧写法，仍可用
@import，但官方已标记为弃用。
2. 使用 Less 引入样式文件
Less 使用 @import 指令来合并样式文件，支持多种选项控制行为。
基本语法：
@import 'base.less'; @import 'themes/dark'; @import (less) 'style.css'; // 强制将 .css 当作 Less 解析常用选项：
-
(less)：即使文件是 .css 也按 Less 解析。 -
(css)：强制作为纯 CSS 引入，不会被编译进输出内容，仅生成@import url(...)语句。 -
(once)：默认行为，同一文件只导入一次。 -
(multiple)：允许重复导入，用于 mixin 多次注入场景。
例如，你想把一个 CSS 文件真正“内联”进输出结果，而不是生成 @import：
@import (less) 'normalize.css';
3. 路径处理与最佳实践
无论 Sass 还是 Less，建议：
- 使用相对路径或配置构建工具（如 Webpack）的
includePaths简化引用。 - 将可复用的变量、mixin 放在单独文件，并以
_开头（Sass）或约定命名（Less）。 - 避免在多个地方重复引入相同文件，防止样式重复。
- 不要用原生 CSS 的
@import url(...)在 Sass/Less 中引入本地文件，它无法在编译期处理。
基本上就这些。关键是理解预处理器的 @import 或 @use 是编译时合并，而 CSS 的 @import 是运行时加载，两者完全不同。用对了才能发挥打包优势。不复杂但容易忽略。
