Question

我有一个使用webpack的Angular 6应用程序，在这个应用程序中，我有一个样式表切换器功能，它将交换已加载的样式表。问题是这些样式表一旦在生产模式下编译后，文件名中就包含哈希（例如，my-style.04beaf113c990fa3d2ba.css），所以由于我不知道正确的哈希值，因此我无法准确地加载正确的样式表。 >

打字稿中是否有一种方法可以检测到此哈希是什么，以便它将加载正确的样式表？

我的样式表切换器代码如下：

  import { Directive, OnInit, HostListener } from '@angular/core';

  @Directive({
    selector: '[wuToggleHighContrast]',
    host: {'class' : 'high-contrast-toggle'}
  })
  export class WuHighContrastDirective implements OnInit {
    linkTag: any;

    ngOnInit() {
      let hc = localStorage.getItem('webui_highContrast');
      if (hc) {
        this.enableHC();
      }
    }

    @HostListener('click')
    toggleHighContrast() {
      if (document.getElementById("wuHighContrast")) {
        this.disableHC();
      } else {
        this.enableHC();
      }
    }

    private enableHC() {
      const head = document.head || document.getElementsByTagName('head')[0];
      this.linkTag = document.createElement('link');
      this.linkTag.rel = 'stylesheet';
      this.linkTag.id = 'wuHighContrast';
      this.linkTag.href = 'high-contrast.css';
      head.appendChild(this.linkTag);
      localStorage.setItem('webui_highContrast', 'true');
    }

    private disableHC() {
      document.getElementById("wuHighContrast").outerHTML = "";
      localStorage.removeItem('webui_highContrast');
    }
  }

我仍然希望哈希提供的缓存无效，但不确定如何应用哈希将其正确链接到样式表。

Answer 1

在Angular CLI中，它支持在生成生产版本时禁用哈希。 ng build --prod --output-hashing none

角度：从文件名获取哈希值以进行样式切换

1 个答案: