includePaths配置后仍报“找不到文件”的根本原因是Sass编译器不继承构建工具的模块解析逻辑，必须使用绝对路径或项目根目录下的正确相对路径，且路径末尾不能带斜杠，同时需确保配置位置准确（如Angular CLI中必须在angular.json的stylePreprocessorOptions下）、仅对.scss有效，并区分@import与@use对路径的严格性要求。
为什么 includePaths 配置了还是找不到文件
常见现象是：在 angular.json 或 Webpack 的 sass-loader 里写了 includePaths: ["src/assets"]，但 @import "vars" 仍报 File to import not found。根本原因是 Sass 编译器不自动继承构建工具（如 Webpack）的模块解析逻辑，includePaths 必须显式声明，且路径必须是**绝对路径**或从项目根目录出发的**正确相对路径**。
实操建议：
- 用
path.resolve(__dirname, 'src/assets')（Node.js 环境）生成绝对路径，避免"src/assets"这类字符串被当作相对于当前 SCSS 文件的位置 - Angular CLI 中需在
angular.json的stylePreprocessorOptions.includePaths下配置，不是放在assets或styles字段里 - 确认路径末尾不带斜杠——
"src/assets/"和"src/assets"在某些版本 Dart Sass 中行为不一致 - 如果用了 Monorepo（如 Nx），
includePaths必须指向该子项目的src/assets，不能跨项目引用父级路径
@import 和 @use 对 includePaths 的响应差异
@import 会按顺序查找 includePaths 列表中的每个目录，匹配到第一个就停止；而 @use（Dart Sass 默认推荐）要求路径更严格：它不支持裸名导入（如 @use "vars"），除非你同时配了 loadPaths（Webpack）或 includePaths（Vite），且该路径下存在 _vars.scss 或 vars.scss。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
@use "vars"不会命中src/assets/vars.scss，但@use "~assets/vars"可能成功——前提是构建工具已将~映射到src/assets -
@import "vars"在includePaths生效时能工作，但一旦迁移到 Dart Sass，它会被标记为 deprecated，且无法享受@use的作用域隔离 - 若同时存在
src/assets/_vars.scss和src/styles/_vars.scss，includePaths: ["src/assets", "src/styles"]会始终优先用前者，无法按需切换
Vite / Webpack / Angular CLI 中 includePaths 的写法区别
同一份路径配置，在不同工具中写法和生效位置完全不同。硬套文档容易白配。
关键点：
- Vite：在
vite.config.ts的css.preprocessorOptions.sass.includePaths中设置，值为字符串数组，支持path.resolve() - Webpack：在
sass-loader的options里设additionalData不管用，必须用implementation: require('sass')+sassOptions: { loadPaths: [...] } - Angular CLI：只认
angular.json里对应项目的architect.build.options.stylePreprocessorOptions.includePaths，且仅对.scss有效，对.sass文件无效 - 别名（如
~）和includePaths是两套机制：前者靠resolve.alias，后者是 Sass 编译器自己的搜索路径，不能混用
路径写对了，但 CSS 里 url() 依然 404
includePaths 只影响 @import 和 @use 的文件查找，完全不干预 CSS 内部的 url() 解析。这是最常被忽略的边界——开发者以为配了 includePaths 就一劳永逸，结果图片、字体路径全挂。
真实情况：
-
url("../images/logo.png")始终以当前 SCSS 文件所在目录为起点，和includePaths无关 - 如果你把
button.scss从src/components/移到src/ui/，所有它内部的url()都要重算，哪怕includePaths指向了src/assets - 想让
url()也走别名？得靠 PostCSS 插件（如postcss-url）或构建工具的public目录映射，不是 Sass 的事
复杂点在于：路径问题从来不是单一环节的事。你改了 includePaths，可能顺手把 @import 改成 @use，结果变量作用域变了；又以为图片路径也自动适配，结果上线后背景图全空。每层抽象都守着自己的规则，没哪个会替你兜底。
