Angular15升级后使用Kendo UI出现Sass导入错误求助

问题原因 #

Angular 15配套的sass-loader已废弃~前缀的导入语法，而旧版Kendo UI主题的SCSS文件仍大量使用~引用依赖，导致编译时无法找到样式文件。

解决步骤 #

• 配置样式预处理器路径
  打开项目根目录的angular.json，找到build配置下的options节点，添加stylePreprocessorOptions，让Sass自动到node_modules中查找依赖：

  "architect": {
    "build": {
      "options": {
        // 保留原有其他配置
        "stylePreprocessorOptions": {
          "includePaths": [
            "./node_modules"
          ]
        }
      }
    }
  }
  

  该配置会让Sass解析导入路径时，自动检索node_modules目录，无需再加~前缀。

• 修改自定义代码中的导入语句
  将自己编写的SCSS文件里的~前缀删除，例如把：

  @import "~@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
  

  修改为：

  @import "@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
  

• 升级Kendo UI主题版本
  优先将Kendo UI主题包升级到兼容Angular 15的最新版本，新版本已移除~前缀的使用，从根源解决问题。执行命令：

  npm update @progress/kendo-theme-bootstrap
  

补充说明 #

若上述步骤仍未解决问题，可检查sass-loader版本是否与Angular 15匹配——Angular 15通常配套^13.x及以上版本的sass-loader，确保版本兼容即可。

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