Angular升级至v15后样式表导入失败问题求助

核心问题原因 #

Angular 15启用的Ivy部分编译模式对依赖包的路径解析逻辑更严格，原有的node_modules绝对路径导入方式不再适配，且exports配置的引用方式未正确使用。

修复步骤 #

1. 修正SCSS导入语句 #

将table.component.scss中的导入路径从：

@import 'node_modules/@mls-ops/bootstrap/style/_variables.scss';

改为使用你配置的exports别名：

@import '@mls-ops/bootstrap/variables';

此方式直接调用你在@mls-ops/bootstrap的package.json中定义的导出规则，符合现代包的引用规范。

2. 确保依赖包已正确构建并引用 #

• 先执行npx ng build @mls-ops/bootstrap完成基础库的构建，确保dist/mls-ops/bootstrap目录下存在style/_variables.scss文件（对应assets配置的输出）。
• 若为本地开发环境，确认@mls-ops/tests的package.json中对@mls-ops/bootstrap的依赖指向正确：
  • 若使用monorepo，直接用工作区依赖（如"@mls-ops/bootstrap": "15.0.0"）；
  • 若单独开发，通过npm link @mls-ops/bootstrap建立本地链接，避免依赖未发布的源码目录。

3. 验证exports配置的正确性 #

确认@mls-ops/bootstrap的package.json中exports路径与实际文件位置匹配：

"exports": {
  "./variables": {
    "sass": "./style/_variables.scss"
  }
}

注意：此处的./style/_variables.scss是相对于package.json的路径，需确保bootstrap库的源码目录中，package.json所在位置下确实存在style/_variables.scss文件。

4. 备选方案：配置样式预处理器路径 #

若上述方法未生效，可在@mls-ops/tests的angular.json中添加样式预处理器的包含路径，让SCSS编译器能直接找到变量文件：

"projects": {
  "@mls-ops/tests": {
    "architect": {
      "build": {
        "options": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "node_modules/@mls-ops/bootstrap/style"
            ]
          }
        }
      }
    }
  }
}

此时导入语句可简化为：

@import '_variables.scss';

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