同一Angular工作区中，如何像引用TS文件一样引用库的SASS文件？

可以实现用库命名空间的简写方式导入Sass文件，不需要依赖相对路径，只需通过以下两步配置完成：

1. 配置库的导出规则 #

在库的ng-package.json中添加exports字段，明确指定styles目录的入口文件路径，这样构建后的库package.json会包含该导出逻辑：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/theme",
  "assets": [
    { "input": "src/lib/styles", "glob": "**/*.scss", "output": "styles" }
  ],
  "exports": {
    ".": "./index.js",
    "./styles": "./styles/index.scss"
  }
}

2. 配置应用的样式预处理器路径 #

打开根目录的angular.json，找到playground应用的build配置项，添加stylePreprocessorOptions并将工作区的dist目录加入includePaths，让Sass能识别库命名空间对应的路径：

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

验证配置效果 #

1. 重新构建库：ng build theme
2. 在playground的styles.scss中使用库的Sass变量：

@use 'theme/styles' as t;

body {
  color: t.$color;
}

此时Sass会正确解析路径，不会再抛出找不到样式表的错误。

开发阶段优化（可选） #

如果想在不构建库的情况下，直接引用源码中的Sass文件进行开发，可以把库的源码路径也加入includePaths：

"stylePreprocessorOptions": {
  "includePaths": [
    "./projects/theme/src/lib",
    "./dist"
  ]
}

这种情况下，你可以直接用@use 'styles' as t;引用库源码里的样式文件，省去频繁构建库的麻烦。

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