使用ng-packager打包Angular组件后SCSS字体资源找不到的问题

我之前也碰到过类似的情况，这个问题本质上是ng-packagr打包时资源路径处理的问题——默认情况下，它不会自动把node_modules里的字体文件打包进你的组件包，导致主项目安装后，SCSS里的字体引用路径会被解析为主项目的根目录，而非组件包的资源目录，所以才会出现找不到字体的报错。

下面是具体的解决步骤：

1. 重写ionicons的字体路径变量 #

在你的组件SCSS文件中，先覆盖ionicons的字体路径变量，再引入ionicons的SCSS文件。这样可以让组件的样式正确指向后续打包到组件包内的字体文件：

// 重写ionicons的字体路径，指向组件包内的assets/fonts目录
$ionicons-font-path: './assets/fonts/ionicons' !default;
// 引入ionicons的样式
@import '~ionicons/scss/ionicons.scss';

2. 配置ng-package.json打包字体资源 #

修改组件包根目录下的ng-package.json，添加assets配置项，把ionicons的字体文件复制到组件包的dist目录中：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist/jtp-alert",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    // 将ionicons的字体文件打包到组件包的assets/fonts目录
    { 
      "glob": "**/*.+(ttf|woff|woff2)", 
      "input": "./node_modules/ionicons/dist/fonts", 
      "output": "./assets/fonts" 
    }
  ]
}

3. 重新打包并发布组件包 #

执行打包命令重新构建组件：

ng build jtp-alert

然后重新发布到npm：

cd dist/jtp-alert
npm publish

4. 主项目更新依赖并测试 #

在主项目中更新你的组件包依赖：

npm update jtp-alert

此时主项目加载组件样式时，会正确从jtp-alert组件包的assets/fonts目录加载字体文件，不会再出现路径错误。

如果主项目自己也引入了ionicons，为了避免冲突，你可以在主项目的styles.scss中同样重写$ionicons-font-path变量，统一指向组件包的字体路径或者主项目本地的字体路径。

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