如何使用注入的字符串作为 CSS 中 URL 路径的一部分（在 Angular 中）

Question

我有一个库，允许您为特定应用程序注入一个 base-href 值，以便无需代理即可访问该库的资产（您在应用程序中作为 npm 依赖项托管）。这在大多数情况下都有效，但我不知道如何在 CSS 中使用注入的值来执行此操作：

$fonts: '#{<injected base path here>}/fonts';

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'),
    url('#{$fonts}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff2') format('woff2'),
    url('#{$fonts}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff') format('woff');
}

问题是 URL 需要在构建时解析，因此此代码无法编译。

2 注意事项：

1. 我正在使用 Angular 和注入令牌。

2. 就我而言，在 scss 文件中，我尝试了

   $fonts: '#{var(--asset-base-path)}/fonts';

   ，在 component.ts 文件中，我尝试了：

@HostBinding('style.--asset-base-path') assetBasePath = '';

constructor(@Inject(LIB_ASSET_BASE_PATH) path: string) {
    this.assetBasePath = path
}

Answer 1

不，DI 无法完成此操作。 DI（依赖注入）是一种运行时行为，当 Angular 在应用程序运行后启动一个组件时，DI 系统将为该组件创建并注入依赖关系。

CSS 预处理器（例如 Sass/Scss/Less）将被编译为纯 css 文件（因为浏览器只接受 css，而不接受 Sass/Scss/Less），并且样式文件中的所有变量必须在构建后进行评估。这意味着你的 css 代码在运行时没有动态行为。

实现您的要求的唯一方法是使用JavaScript来操作样式并在运行时设置字体路径。