loadPaths 是 Sass 查找 @use/@import 的 Sass 源文件（.scss/.sass）的搜索路径，不处理 CSS 文件；@import "xxx.css" 不走 loadPaths，且现代 Sass 禁止导入外部 CSS。
loadPaths 是什么，为什么它不解决 CSS @import 的路径问题
loadPaths 是 Sass 编译器（尤其是 Dart Sass 的 dart-sass CLI 或 Node API）用于查找 @use 和 @import（已弃用）中相对路径的**Sass 源文件**（.scss / .sass）的搜索目录列表。它对纯 CSS 文件完全无效——如果你写 @import "normalize.css"，Sass 不会去 loadPaths 里找这个文件，而是直接按字面路径解析，且现代 Sass 已禁止直接 @import 外部 CSS（会报错 "@import" rules are not allowed in modules）。
真正要“引用外部 CSS 库”，核心不是配置路径，而是明确使用场景：
- 你只是想把
normalize.css或tailwind.css的内容原样注入最终 CSS？→ 用构建工具（如 PostCSS、Vite、Webpack）的插件或assets引入机制，不是 Sass 负责的事 - 你想在 Sass 中复用某个 CSS 库的变量/混合宏（比如 Bootstrap 的
$primary）？→ 那库必须提供 Sass 源码（_variables.scss），且你得用@use导入，这时loadPaths才起作用
当 loadPaths 确实有用：指向 Sass 源码库的正确姿势
假设你安装了 Bootstrap 的 Sass 版：npm install bootstrap，它带的是 scss/ 目录。你想在自己的 main.scss 里写：
@use "bootstrap" as bs;
这行能工作，前提是编译时告诉 Sass 去哪找 bootstrap 这个包。方法有二：
- CLI 方式：
dart-sass --load-path=node_modules/bootstrap/scss main.scss - Node API 方式（如用
gulp-sass）：sass.render({ loadPaths: ["node_modules/bootstrap/scss"] }) - Vite 用户注意：
vite-plugin-sass默认不读loadPaths，需显式传入options对象
关键点：路径必须精确到包含 _index.scss 或 _bootstrap.scss 的目录，不能只写 node_modules/bootstrap（因为里面没有 .scss 入口）。
@use 和 @import 的路径行为差异必须分清
旧版 @import "foo" 会尝试匹配：foo.scss → foo.sass → foo.css；新版 @use "foo" **完全不查 .css**，只认 Sass 源文件，且要求路径要么是绝对路径（以 / 开头），要么是可被 loadPaths 解析的裸名（如 "bootstrap"）。
- 写
@use "./lib/reset.scss"→ 按相对路径找，不需要loadPaths - 写
@use "reset"→ 必须靠loadPaths找到reset.scss或_reset.scss - 写
@use "https://cdn.example.com/foo.scss"→ 不支持，Sass 不加载远程文件
试图用 loadPaths 让 @use "tailwind.css" 工作？必然失败——扩展名不对，且 Tailwind 官方也不提供 .css 的 Sass 模块化入口。
真正引入外部 CSS 的推荐做法（绕过 Sass）
如果你的目标只是把 modern-normalize.css 合并进输出 CSS，别硬塞给 Sass 处理：
- Vite 项目：在
main.ts或main.js里加import 'modern-normalize'，配合css.preprocessorOptions.sass配置仅影响 .scss 文件 - Webpack + css-loader：直接
import 'some-css-lib/dist/lib.css'，由 loader 链处理 - 纯 CLI 场景：用
cat node_modules/normalize.css/normalize.css >> dist/bundle.css合并（简单脚本即可）
强行让 Sass 处理 CSS 文件，不仅违背模块化设计，还会丢失 source map、无法 tree-shake、且未来 Sass 可能彻底移除相关兼容逻辑。
最常被忽略的一点：很多人以为 loadPaths 是万能路径代理，其实它只服务 Sass 模块系统——而外部 CSS 库绝大多数时候根本不在这个系统里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
