Question

我们有一个嵌入式Web应用程序，该应用程序要求在构建和部署该应用程序后，它需要能够由集成商重新命名。要求指出，集成商可以上传branding.css，该名称将使用品牌颜色等替换现有样式。

问题是Angular和Angular CLI似乎无法满足此要求。我想在写一个骇人的后处理python脚本来完成工作之前在这里仔细检查。

基本上，我想要做的只是做完ng build之后，我希望我的index.html看起来像这样：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title [translate]="'index.title'"></title>
    <base href="/">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.f14ea32bf407dc2d4831.bundle.css" rel="stylesheet" />
    <link href="branding.css" rel="stylesheet" />
</head>

以这种方式branding.css是最后的方式，这意味着其中的任何类都将覆盖样式束中的那些类，并且集成商可以简单地用合作伙伴的品牌覆盖该文件。有办法做到这一点（或类似方法）吗？

Answer 1

您也可以尝试动态加载CSS

this.http.get('assets/test.css', { responseType: 'text' })
  .subscribe((css) => {
    let head = document.getElementsByTagName('head')[0];
    let link = document.createElement('style');
    link.type = 'text/css';
    link.appendChild(document.createTextNode(css));
    head.appendChild(link);
  });

在angular.json中，

 ...
 "extractCss": true,
 "assets": [
   "src/assets" /* "src/favicon.ico", other assets */
 ],
 ...

演示：https://stackblitz.com/edit/angular-e7htks?file=src%2Fassets%2Ftest.css 您可以调整test.css并刷新嵌入页面以查看实际效果。

此处给出的CSS只是纯文本，您还可以让用户上传CSS，对其进行清理并在端点上提供服务。

Answer 2

您可以在<link href="branding.css" rel="stylesheet" />的末尾添加<body>，而不要在<head>中添加。这不是一个好习惯，但在这种情况下可能是有道理的。

您的源index.html：

<head>
  <!--Base, title, meta tags-->
</head>
<body>
  <my-app></my-app>
  <!--Branding style overrides-->
  <link href="branding.css" rel="stylesheet" />
</body>

构建之后，您应该获得：

<head>
  <!--Base, title, meta tags-->
  <link href="styles.f14ea32bf407dc2d4831.bundle.css" rel="stylesheet" />
</head>
<body>
  <my-app></my-app>
  <!--Branding style overrides-->
  <link href="branding.css" rel="stylesheet" />
  <script type="text/javascript" src="main.js">
</body>

由于Angular将样式注入<head>中，因此您的品牌CSS将在文档的后面出现，并且具有更高的特异性。

MDN says...

<link>元素可以出现在<head>或<body>元素中，具体取决于它的链接类型是否正确。例如，样式表链接类型为body-ok，因此主体中允许<link rel="stylesheet">。但是，这不是遵循的好习惯。将您的<link>元素与身体内容分开，将其放入<head>中是更有意义的。

最后添加静态CSS文件（用于品牌）

2 个答案: