根本原因是Sass默认仅在当前文件所在目录及子目录搜索@import目标，不自动向上查找或进入node_modules；必须通过includePaths（Webpack）或loadPaths（Vite）显式配置绝对路径，如path.resolve(__dirname, 'src/styles')和path.resolve(__dirname, 'node_modules')。
为什么 @import 总报 “File to import not found”？
根本原因不是文件写错了，而是 Sass 默认只在当前文件所在目录及其子目录里找 @import 目标——它不会自动向上跳级（比如从 components/Button.scss 去找 src/styles/_variables.scss），更不会钻进 node_modules。你写的 @import 'bootstrap/scss/bootstrap' 或 @import '~styles/vars'，编译器压根没去那些地方翻。
Webpack 项目中配置 includePaths 的关键点
必须用 path.resolve() 生成绝对路径，不能拼字符串；路径列表里至少得包含这两个：
-
path.resolve(__dirname, 'src/styles')（存放自定义 SCSS 工具文件的常用位置） -
path.resolve(__dirname, 'node_modules')（否则所有第三方库如 Bootstrap、Susy 都会导入失败）
示例配置（sass-loader v14+）：
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
sassOptions: {
includePaths: [
path.resolve(__dirname, 'src/styles'),
path.resolve(__dirname, 'node_modules')
]
}
}
}
漏掉 node_modules 是最常见错误；Windows 下用 __dirname + '/src/styles' 会因反斜杠被当转义符而失效。
Access global ocean tides model. Functions include tide height at a given date/time/location, tide extrema, and grid weather data.
下载
访问全球海洋潮汐模型。功能包括查询指定日期、时间和地点的潮高、潮汐极值及格点天气数据。
Vite 项目要用 loadPaths，不是 includePaths
Vite 的 css.preprocessorOptions.sass 不认 includePaths 字段，得用 Dart Sass 原生命名的 loadPaths：
export default defineConfig({
css: {
preprocessorOptions: {
sass: {
loadPaths: [
path.resolve(__dirname, 'src/styles'),
path.resolve(__dirname, 'node_modules')
]
}
}
}
})
~ 前缀默认不生效——Vite 不内置 tilde 解析，想用 @import '~bootstrap/scss/bootstrap'，得额外装 sass-tilde-importer 并加进 importers 数组。
Stylelint 报 @mixin 未知规则？那是另一回事
这和 includePaths 完全无关。Stylelint 默认只认 CSS 标准 @ 规则，@mixin、@include 属于 Sass 扩展语法，需要插件支持：
- 装
stylelint-scss和stylelint-config-recommended-scss - 配置里
extends加上'stylelint-config-recommended-scss' - 别直接关掉
at-rule-no-unknown，否则真遇到浏览器不支持的 CSS at-rule 就收不到提醒了
路径配置和语法识别是两层事：一个管“文件在哪”，一个管“这段文字算不算合法”。混在一起调，只会让问题更难定位。
