Angular中使用@use导入ngx-popperjs样式失败问题排查

• 检查package.json的exports配置
  Angular Material无需额外配置就能被@use识别，核心是它在package.json中通过exports字段指定了SASS入口文件。你需要确保ngx-popperjs的package.json包含类似配置：

  "exports": {
    ".": {
      "sass": "./_index.scss"
    }
  }
  

  如果ngx-popperjs是你维护的包，直接添加该配置；如果是第三方包，可考虑向官方提交issue补充该配置。

• 确认_index.scss的位置与内容
  确保_index.scss放在ngx-popperjs包的根目录（与package.json同级），且内部@forward指令的路径正确指向实际样式文件，示例：

  @forward "./src/styles/core";
  @forward "./src/styles/components";
  

  路径错误会导致构建时无法找到目标样式文件。

• 理解Angular与IDE的解析差异
  IDE能正常识别@use导入，是因为它直接扫描node_modules目录；但Angular构建时会优先读取package.json的exports字段定位资源，缺少该配置就会触发“Can't find stylesheet to import”错误。

• 临时兼容方案（针对第三方包）
  如果无法修改第三方包的配置，可在angular.json的build.options.stylePreprocessorOptions中添加ngx-popperjs的路径，强制构建器识别：

  "stylePreprocessorOptions": {
    "includePaths": [
      "node_modules/ngx-popperjs"
    ]
  }
  

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