Angular库中是否可以缩短样式文件的导入路径？

解决Angular库样式简化导入配置方案 #

90%以上的配置失效是因为styleIncludePaths的放置位置错误，或者相对路径配置错误，按以下步骤操作即可： #

第一步：确认目录结构

标准Angular库目录结构参考：

projects/
└── component-library/ # 你的库根目录
    ├── ng-package.json # 库主入口配置文件
    └── src/
        ├── styles/ # 共享样式存放目录
        │   └── theme.scss # 要导入的变量/公共样式文件
        └── lib/
            └── some-component/ # 任意层级的业务组件
                └── some-component.component.scss

第二步：正确配置ng-package.json

styleIncludePaths必须放在lib字段下，路径为相对于当前ng-package.json文件的相对路径：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/component-library",
  "lib": {
    "entryFile": "src/public-api.ts",
    // 重点：添加该配置，路径对应共享样式目录的相对位置
    "styleIncludePaths": ["src/styles"]
  }
}

第三步：组件内导入

配置完成后重启构建进程，即可在任意组件的scss文件中直接简化导入：

// 无需写冗长的相对路径
@import 'theme';

特殊情况：次级入口配置

如果你的库拆分了次级入口（比如单独的@my-lib/button、@my-lib/card入口），每个次级入口的ng-package.json需要单独配置该字段，路径对应次级入口配置文件到共享样式目录的相对路径即可。
比如次级入口配置文件在src/button/ng-package.json，则配置为：

{
  "lib": {
    "entryFile": "./public-api.ts",
    "styleIncludePaths": ["../styles"]
  }
}

注意：修改配置后必须重启本地构建/开发服务，新的路径配置才会生效。

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