如何配置Sass的Include路径以简化开发？-css教程-PHP中文网

根本原因是sass默认仅在当前文件所在目录及子目录搜索@import目标，不自动向上查找或进入node_modules；必须通过includepaths（webpack）或loadpaths（vite）显式配置绝对路径，如path.resolve(__dirname, 'src/styles')和path.resolve(__dirname, 'node_modules')。

如何配置sass的include路径以简化开发？

为什么 `@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 数组。