时间戳

首页 > 解决方案 > 如何在 Angular 7 中添加对生成样式的引用。[hash].css 文件

css - 如何在 Angular 7 中添加对生成样式的引用。[hash].css 文件

问题描述

我有一个 Angular 7 项目，它在 prod 构建中生成 styles.[hash].css 文件。

我的一个组件中有一个 iframe，它加载在同一个项目中定义的静态 html 文件（不是角度组件，只是普通的静态 html）。

我想在 iframe 中加载的静态 html 文件中重用我的项目样式。有没有办法知道作为产品构建的输出在 dist 文件夹中生成的 styles.css 文件的名称？

我正在使用生成产品构建 ng build --aot --prod --stats-json

这会生成一个 stats.json 文件，该文件的文件名位于 assetsByChunkName 字段中。

"assetsByChunkName": {
        "runtime": "runtime.b2ebd3cc7f73d5966db1.js",
        "main": "main.9872f510320bbf1b0ad9.js",
        "polyfills": "polyfills.b2e1d6dfcc48e480634c.js",
        "styles": "styles.4bd3b6df7eaeb9129b4d.css"
    }

有没有一种干净的方法（可能是使用插件）在我的 iframe 的 html 文件中添加以下行，例如 <link rel="stylesheet" href="styles.4bd3b6df7eaeb9129b4d.css">？

寻找一种适用于ng serveangular-cli 和 prod 构建的解决方案

注意：我想在 prod 文件中维护哈希以获得它的好处

标签： cssangularwebpackangular-cli

解决方案

document.querySelector('link[rel=stylesheet][href^=styles][href*=css]')?.href

推荐阅读