Включить статический CSS-файл последним (для брендинга) - PullRequest
Новая
       9

Включить статический CSS-файл последним (для брендинга)

0 голосов
/ 12 февраля 2019

У нас есть встроенное веб-приложение, которое требует, чтобы его интегратор мог переименовать после того, как приложение будет создано и развернуто.В требовании говорится, что интегратор может загрузить branding.css, который заменит существующие стили на цвета бренда и т. Д.

Проблема заключается в том, что выполнить это требование с Angular и Angular CLI кажется невозможным.Я хотел проверить здесь еще раз, прежде чем написать хакерский скрипт Python для пост-обработки, который выполняет свою работу.

По сути, все, что я хочу, это после выполнения ng build, я хочу, чтобы мой index.html выглядел какthis: 

<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 является последним, что означает, что любые классы там будут переопределять классы в пакете стилей, и интегратор может просто перезаписать этот один файл с использованием фирменного стиля партнера.Есть ли способ сделать это (или подобное)?

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Вы также можете попробовать загрузить 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, обрабатывать его и обрабатывать через конечную точку.

0 голосов
/ 12 февраля 2019

Вы можете добавить <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 говорит ...

Элемент <link> может встречаться либо в элементе <head>, либо <body>, в зависимости от того, имеет ли он тип ссылки, допустимый для body.Например, тип ссылки таблицы стилей - body-ok, и поэтому в теле допускается <link rel="stylesheet">.Тем не менее, это не очень хорошая практика для подражания;более разумно отделить ваши элементы <link> от содержимого вашего тела, поместив их в <head>.

...