Angular中如何在CSS的URL路径中使用注入的字符串

问题分析 #

你的Angular库通过注入令牌LIB_ASSET_BASE_PATH提供动态base路径，能解决多数资源的无代理访问问题，但在SCSS中配置@font-face时，由于SCSS构建阶段会强制解析url()函数，导致动态注入的路径无法生效——不管是直接嵌入注入值还是使用CSS变量，都会因为编译时的路径解析规则失败。

可行解决方案 #

方案1：用纯CSS变量绕过SCSS编译解析 #

SCSS编译时不会解析纯CSS变量的内容，直接在url()中使用CSS变量，就能避免编译阶段的路径解析错误：

1. 在SCSS文件中定义@font-face时直接用CSS变量：

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

2. 在组件TS文件中通过@HostBinding注入CSS变量：

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

constructor(@Inject(LIB_ASSET_BASE_PATH) path: string) {
    // 移除路径末尾斜杠，避免拼接后出现重复斜杠
    this.assetBasePath = path.replace(/\/$/, '');
}

SCSS编译时会忽略url()内的CSS变量，运行时CSS会读取组件上的--asset-base-path变量，动态拼接正确的字体路径。

方案2：运行时动态生成@font-face规则 #

如果方案1不适用，可以通过TS代码在运行时直接创建字体样式规则，完全绕过SCSS的编译解析：

1. 移除SCSS中的@font-face定义，在组件TS中编写如下代码：

constructor(@Inject(LIB_ASSET_BASE_PATH) private basePath: string) {
    this.loadCustomFonts();
}

private loadCustomFonts(): void {
    const fontBasePath = `${this.basePath.replace(/\/$/, '')}/fonts`;
    const styleElement = document.createElement('style');
    
    styleElement.textContent = `
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'),
            url(${fontBasePath}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff2) format('woff2'),
            url(${fontBasePath}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff) format('woff');
        }
    `;
    
    document.head.appendChild(styleElement);
}

这种方法直接在运行时用注入的base路径生成字体规则，彻底避开编译阶段的路径问题，兼容性更强。

注意事项 #

• 确保注入的LIB_ASSET_BASE_PATH是正确的绝对路径或相对路径，避免路径拼接错误
• 使用CSS变量方案时，现代浏览器均支持该特性，无需额外兼容处理

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