Angular库中SCSS使用导出与路径引用配置问题

问题本质是两个配置缺漏：TS路径别名不对样式预处理器生效、静态资源相对路径解析基准随引入位置变化，按以下步骤配置即可解决：

1. 配置SCSS全局导入路径，废弃多层相对路径 #

tsconfig.json里的paths别名仅对TS/JS模块生效，SCSS预处理器不会读取，需要在库的ng-package.json中单独添加样式搜索路径配置：

{
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": ["./assets"],
  // 新增以下配置
  "styleIncludePaths": [
    "./assets/styles",
    "./assets"
  ]
}

配置完成后：

• 库内部组件引入SCSS文件不需要再写../../../xxx这类长相对路径，直接写@import '文件名.scss';即可
• 如果需要避免样式命名冲突，可以在assets/styles目录下新建和包名一致的层级目录（比如assets/styles/@my-lib/core/），把公共SCSS文件放在该目录下，后续导入直接写@import '@my-lib/core/xxx.scss';，和TS模块的导入路径规则保持一致，不需要额外做别名配置。

2. 修复字体等静态资源的路径解析错误 #

postcss-url的路径解析基准默认是最终引入样式的组件文件位置，而非SCSS源文件位置，所以写../fonts/xxx.eot这类相对路径必然会出现解析错位，解决方法非常直接：
库内所有SCSS文件引用字体、图片等静态资源时，全部使用~包名+资源绝对路径的写法，不要用相对路径：

@font-face {
  font-family: 'BrandFont';
  src: url('~@my-lib/core/assets/fonts/xyz.eot');
  src: url('~@my-lib/core/assets/fonts/xyz.eot?#iefix') format('embedded-opentype'),
       url('~@my-lib/core/assets/fonts/xyz.woff2') format('woff2'),
       url('~@my-lib/core/assets/fonts/xyz.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

路径开头的~是告知Angular构建工具，该路径从node_modules目录开始解析，无论SCSS文件被哪个层级的组件引入，都会固定定位到安装好的@my-lib/core包下的对应资源，不会出现路径偏移。

注意：必须保证ng-package.json的assets配置已经包含了资源根目录，ng-packagr打包时会自动把assets下的所有文件原封不动复制到发布包中，不需要额外做复制配置。

3. 对外暴露样式入口，简化消费项目引入 #

不需要让消费项目自己拼接深层路径找样式文件，在库的package.json中添加exports字段，明确暴露样式和资源入口：

{
  "name": "@my-lib/core",
  "exports": {
    "./styles/*": {
      "style": "./assets/styles/*"
    },
    "./assets/*": "./assets/*"
  }
}

配置完成后消费项目可以直接用统一路径引入：

• 全局引入：在消费项目的src/styles.scss中写@import '@my-lib/core/styles/global.scss';即可加载全局品牌样式
• 组件级引入：在任意组件的SCSS文件中写@import '@my-lib/core/styles/variables.scss';即可引入变量、mixin等复用样式片段，不需要在消费项目里额外配置任何路径别名。

避坑清单 #

• 不要尝试复用tsconfig的paths配置处理SCSS导入，样式预处理器不会读取该配置
• 所有静态资源引用禁止写相对路径，全部使用~包名/资源路径的绝对格式
• assets目录仅存放需要原样输出的静态文件（字体、图片、编译后CSS），需要被导入复用的SCSS源文件放在styleIncludePaths指向的目录下即可，不需要做预编译
• 如果是Angular 12及以下版本，需要在消费项目的angular.json中给构建目标添加stylePreprocessorOptions.includePaths配置，指向node_modules/@my-lib/core/assets/styles目录，高版本Angular会自动识别ng-packagr导出的样式路径，不需要额外配置。

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