Angular升级至14版本后出现SassError：无法找到要导入的样式表

核心修复方案 #

• 移除导入路径中的~前缀：Angular 14基于Webpack 5，不再支持~作为src目录的前缀标识。修改导入语句为相对路径或基于项目根目录的路径：
  原代码：

  @import "~src/vendor/libs/ng2-nouislider/mixins";
  

  修改为相对路径（根据当前styles.scss的位置调整层级）：

  @import "../../../vendor/libs/ng2-nouislider/mixins";
  

  或使用Angular默认的src别名（需确保angular.json中已配置）：

  @import "@/vendor/libs/ng2-nouislider/mixins";
  

• 配置stylePreprocessorOptions简化导入：在angular.json的build.options中添加目录映射，无需写完整路径即可导入文件：

  "stylePreprocessorOptions": {
    "includePaths": [
      "src/vendor/libs"
    ]
  }
  

  配置后可直接简写为：

  @import "ng2-nouislider/mixins";
  

• 更新依赖适配Angular 14：检查ng2-nouislider版本是否支持Angular 14，若版本过旧执行更新：

  npm update ng2-nouislider
  

额外排查步骤 #

• 确认文件存在：检查src/vendor/libs/ng2-nouislider/mixins.scss文件是否存在，注意文件名后缀（Sass默认识别.scss，若文件名不符需对应修改导入语句）。
• 清理缓存重建：执行命令清理Angular缓存后重新构建项目：

  ng cache clean
  npm run build
  

内容的提问来源于stack exchange，提问作者az rnd