Sass中导入第三方库需显式配置includePaths将node_modules加入搜索路径，推荐用@use替代@import（Bootstrap 5.3+支持），vendor目录仅放不可npm安装的原始Sass源码，避免CSS文件和含相对路径的旧式包。
如何在Sass中正确导入第三方库（如Bootstrap、Bulma）
直接 @import "bootstrap" 会报错，因为 Sass 本身不解析 node_modules 路径，也不理解 CommonJS 或 ESM 的导出方式。必须显式告诉 Sass 哪里找这些文件。
- 用构建工具（如 Webpack、Vite、esbuild）配置
includePaths或sassOptions.includePaths，把node_modules加进去 - 现代推荐写法是用
@use替代@import，但前提是第三方库已适配模块化（如 Bootstrap 5.3+ 支持，旧版不行） - 如果库没提供
index.scss入口，得手动指定路径，比如@use "~bootstrap/scss/functions"（Webpack 别名支持下）或@use "../node_modules/bootstrap/scss/mixins" - Vite 用户注意：默认不识别
~别名，需在vite.config.ts中配css.preprocessorOptions.sass.additionalData或改用相对路径
vendor 目录该不该放 .scss 文件？放什么？
放，但只放「不可控的原始资产」——即你无法 npm install、又不想每次手动更新的第三方 Sass 源码（比如某个小众 UI 库只提供 .scss 下载包）。
- 不要放编译后的 CSS；Sass 编译器不处理 .css 文件，
@import "vendor/foo.css"会被当纯 CSS 字符串拼入，失去变量/mixin 作用 - 不要放带
@import的旧式 Sass 包（尤其含../路径的），容易因相对路径失效而报File to import not found - 推荐结构：
src/styles/vendor/bootstrap/（解压后完整目录），再通过@use "vendor/bootstrap/scss/functions"导入 - 若 vendor 里有
_index.scss，优先用它统一暴露 API，避免散列导入
为什么 @import 从 node_modules 导入总失败？
不是路径写错了，是 Sass 版本和加载机制变了。Dart Sass（当前主流）已废弃全局 includePaths 对 @import 的隐式支持，且完全移除了对 node_modules 的自动查找。
-
@import "bootstrap"失败：Sass 不会像 Node.js 那样解析package.json#sass字段或main字段 - 错误信息通常是
Can't find stylesheet to import，而不是模块未找到 —— 这说明 Sass 根本没进 node_modules 查 - Webpack 用户常见误操作：只配了
resolve.alias，但没同步配sass-loader.options.additionalData或includePaths - 真正起作用的是构建工具传给 Sass 的
includePaths数组，例如：["node_modules", "src/styles"]
用 @use 管理 vendor 样式时要注意什么？
@use 是隔离作用域的，第三方库的变量、函数、mixin 不会自动注入全局，必须显式调用或重命名。
立即学习“前端免费学习笔记（深入）”；
- 不能写
@use "bootstrap"就完事，得@use "bootstrap" as bs，然后用bs.color("primary")或bs.$primary - 如果多个 vendor 库都定义了
$theme-colors，@use可避免冲突；但也要小心——你可能以为用了 A 库的 mixin，实际调的是 B 库同名的 - 某些老库（如早期 Foundation）没有按模块拆分，只有单个
_settings.scss和_global.scss，这时仍得用@import，且要严格控制顺序（变量 → mixin → 组件） - 别在
@use后加with覆盖变量，除非文档明确支持；很多第三方库的with参数是内部实现，不稳定
scoped）、是否被 PurgeCSS 扫描、是否触发重复编译 —— 这些不在 Sass 层级解决，得看构建链路怎么接。 
