Angular CLI生产构建：如何运行时加载带哈希的懒加载全局样式？

这个问题确实很常见——当我们配置了独立的懒加载样式表（比如你的print.scss），生产环境构建后文件名会带上哈希值，导致无法硬编码引用。下面分享几个实用的解决方案，适配打印场景和CKEditor iframe的需求：

方案一：构建阶段生成样式文件名映射（推荐） #

核心思路是在生产构建完成后，自动提取带哈希的print样式文件名，写入一个Angular能访问的文件，然后在代码中动态加载。

步骤1：添加构建后脚本 #

在项目根目录创建一个scripts/get-print-css.js文件，内容如下：

const fs = require('fs');
const path = require('path');

// 替换成你的项目dist目录路径
const distDir = path.join(__dirname, '../dist/your-project-name');
// 匹配print开头的css文件
const printCssFiles = fs.readdirSync(distDir).filter(file => 
  file.startsWith('print.') && file.endsWith('.bundle.css')
);

if (printCssFiles.length !== 1) {
  throw new Error(`找到${printCssFiles.length}个print样式文件，预期1个`);
}

// 将文件名写入环境文件
const outputContent = `export const PRINT_CSS_FILENAME = '${printCssFiles[0]}';`;
fs.writeFileSync(
  path.join(__dirname, '../src/environments/print-css.ts'),
  outputContent
);

步骤2：更新package.json的构建命令 #

修改scripts里的生产构建命令，让脚本在构建后自动运行：

"scripts": {
  "build:prod": "ng build --prod --extract-css && node scripts/get-print-css.js"
}

步骤3：创建服务动态加载样式 #

创建一个PrintStyleService来管理样式的加载和卸载：

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { PRINT_CSS_FILENAME } from '../environments/print-css';

@Injectable({ providedIn: 'root' })
export class PrintStyleService {
  private renderer: Renderer2;
  private styleLink?: HTMLLinkElement;

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  // 加载打印样式
  loadPrintStyles(): void {
    if (this.styleLink) return;

    this.styleLink = this.renderer.createElement('link');
    this.renderer.setAttribute(this.styleLink, 'rel', 'stylesheet');
    this.renderer.setAttribute(this.styleLink, 'type', 'text/css');
    this.renderer.setAttribute(this.styleLink, 'href', `/${PRINT_CSS_FILENAME}`);
    this.renderer.appendChild(document.head, this.styleLink);
  }

  // 卸载打印样式（可选，比如打印完成后清理）
  unloadPrintStyles(): void {
    if (this.styleLink) {
      this.renderer.removeChild(document.head, this.styleLink);
      this.styleLink = undefined;
    }
  }
}

步骤4：在业务代码中使用 #

• 打印场景：在打印按钮点击时调用loadPrintStyles()，打印完成后调用unloadPrintStyles()：

constructor(private printStyleService: PrintStyleService) {}

onPrint(): void {
  this.printStyleService.loadPrintStyles();
  // 延迟执行打印，确保样式加载完成
  setTimeout(() => {
    window.print();
    this.printStyleService.unloadPrintStyles();
  }, 300);
}

• CKEditor iframe：在CKEditor初始化完成后，向iframe中注入样式：

// 假设你已经获取了CKEditor的iframe元素
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const link = iframeDoc.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = `/${PRINT_CSS_FILENAME}`;
iframeDoc.head.appendChild(link);

方案二：内联打印样式（适合样式内容较少的场景） #

如果你的print.scss内容不多，可以直接把样式内联到组件中，用@media print包裹：

@media print {
  // 你的打印样式内容
  body { font-size: 12pt; }
  .no-print { display: none; }
}

这种方式不需要额外处理哈希问题，缺点是样式会打包到组件的CSS中，无法单独复用。

方案三：利用Angular CLI的asset资源映射（进阶） #

你也可以配置Angular CLI在构建时生成一个资源清单文件，然后通过HTTP请求读取这个清单，解析出print样式的文件名。不过这种方式需要自定义webpack配置，相对复杂一些，适合有webpack自定义需求的项目。

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