Angular库次级入口SCSS文件导出与路径配置问题

可以实现，以下是几种实用的解决方法：

方案1：通过Angular stylePreprocessorOptions配置查找路径 #

在消费项目（或库自身）的angular.json中，找到对应项目的build配置，添加stylePreprocessorOptions将次级入口的源码目录纳入SCSS预处理器的查找范围：

"projects": {
  "your-target-project": {
    "architect": {
      "build": {
        "options": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "./path/to/your-library/my-entry/src"
            ]
          }
        }
      }
    }
  }
}

配置完成后，你可以直接简化导入写法：

@use 'my-styles.scss';

如果想保留别名风格，只需将includePaths指向库的根目录，就能继续使用@use '@my-entry/src/my-styles.scss'的写法。

方案2：配置次级入口打包导出SCSS资源（库规范写法） #

作为Angular库，使用ng-packagr打包时，可在次级入口的ng-package.json中配置assets，将SCSS文件作为公开资源打包输出：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-entry",
  "assets": [
    "src/my-styles.scss"
  ],
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}

打包完成后，消费端无需额外配置，直接通过次级入口别名导入即可：

@use '@my-entry/my-styles.scss';

这种方式更符合Angular库的资源导出规范，避免消费端依赖路径配置。

方案3：补充tsconfig路径映射优化编辑器提示 #

虽然tsconfig的paths仅对TS文件编译生效，但VS Code等编辑器会读取该配置提供SCSS路径智能提示。你可以补充如下配置：

"paths": {
  "@my-entry/*": ["my-entry/*"],
  "@my-entry/styles/*": ["my-entry/src/*.scss"]
}

注意：此配置仅提升开发体验，实际编译仍需配合方案1或方案2使用。

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