Angular v17无法找到自定义库中样式表的问题求助

问题 #

使用Angular v17开发自定义库，在应用的style.scss中尝试通过@import "@my-company/ngx-luai/styles/index";导入库样式时，编译报错找不到对应样式表。

已完成的配置 #

• 编译后库的样式文件已输出到正确路径：@my-company/ngx-luai/styles/目录下存在_index.scss等文件
• 库源码目录结构：样式文件位于src/lib/resources/styles/
• ng-package.json已配置资源导出：

"assets": [
  {
    "input": "src/lib/resources/styles",
    "glob": "**/*.scss",
    "output": "styles"
  }
]

• 库的package.json已添加导出配置：

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

报错信息 #

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):        
Can't find stylesheet to import.
  ╷
3 │ @import "@my-company/ngx-luai/styles/index";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 3:9  root stylesheet

解决步骤 #

1. 修正package.exports配置 #

当前exports仅配置了库根路径的Sass导出，未覆盖styles/index路径，需要补充对应规则：

"exports": {
  ".": {
    "sass": "./styles/_index.scss"
  },
  "./styles/index": {
    "sass": "./styles/_index.scss"
  }
},

若需支持多个样式文件的导入，可使用通配符简化配置：

"exports": {
  ".": {
    "sass": "./styles/_index.scss"
  },
  "./styles/*": {
    "sass": "./styles/*.scss"
  }
},

2. 验证样式文件命名 #

确保主样式文件命名为_index.scss（Sass局部文件规范，下划线开头），导入时的index会自动匹配该文件。

3. 调整导入语句 #

可尝试两种导入方式排查：

• 用相对路径直接导入（验证文件是否存在）：

@import "../node_modules/@my-company/ngx-luai/styles/index";

• 利用根路径导出直接导入库：

@import "@my-company/ngx-luai";

4. 清理缓存并重新构建 #

执行以下命令清理缓存，避免旧构建产物干扰：

# 清理库的构建产物
ng build @my-company/ngx-luai --clean
# 清理Angular缓存
ng cache clean
# 重装依赖
rm -rf node_modules package-lock.json
npm install
# 重新构建应用
ng build

5. 确认ng-packagr版本兼容性 #

Angular 17需要匹配兼容的ng-packagr版本，更新到最新兼容版：

npm install ng-packagr@latest --save-dev

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