Создание встроенной угловой страницы index.html со всеми правилами CSS, используемыми шаблонами? - PullRequest
Новая
       35

Создание встроенной угловой страницы index.html со всеми правилами CSS, используемыми шаблонами?

0 голосов
/ 26 апреля 2018

Чтобы запустить uncss для удаления неиспользуемых правил CSS, мне нужно сгенерировать одну страницу, содержащую все правила CSS, используемые угловыми шаблонами.Я думаю, что Rendertron мог бы соответствовать этому сценарию, но мне было интересно, можно ли сделать то же самое с Angular CLI?

Например, если мы запустим ng build, angular сгенерирует dist/index.htmlфайл с пользовательскими селекторами элементов в файле dist/index.html.Однако это не может быть предназначено для uncss , потому что шаблон не был обработан.Он по-прежнему представлен, например, <app-root>, поэтому uncss не может видеть правила css, применяемые шаблоном <app-root>.

1 Ответ

0 голосов
/ 26 апреля 2018

Да, по умолчанию все скомпилированные файлы CSS и js будут сгенерированы в папку dist с помощью углового cli. При необходимости вы можете настроить это, используя angular-cli.json, присутствующий в вашем проекте.Как вы можете видеть в следующем примере index.html , он содержит путь ко всем файлам css и JS.Обычно он создает один CSS-файл, так как хорошо загружать весь CSS-файл за один запрос. 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My APP</title>
  <base href="/">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="styles.3e523e6b74c68b0940ab.bundle.css" rel="stylesheet" />
</head>

<body>
  <app-root></app-root>
  <script type="text/javascript" src="inline.5d1afc94d5922f9e85f3.bundle.js"></script>
  <script type="text/javascript" src="polyfills.45da1a3263e1321501bf.bundle.js"></script>
  <script type="text/javascript" src="scripts.4d46a754e6ffe4a0ff23.bundle.js"></script>
  <script type="text/javascript" src="main.cec0d2d86e8c98d02873.bundle.js"></script>
</body>

</html>

Вы также можете указать cli для разделения CSS / js любого конкретного поставщика на отдельные файлы.Перейдите по ссылке , чтобы узнать больше о конфигурации.

Поскольку вы указали бы все свои css и js в uncss , так что вы можете использовать содержимое папки dist.

...