Дублированные стили на голове и множество элементов <style>

Я очень доволен компонентами angular -material2, но есть некоторые странные поведения, которые я не понимаю, и у них нет надлежащей документации, особенно для кишения и настройки их компонентов.

Мой проект выглядит так:

.src
  --app
    --components
      --login-component
           login-component.html
           login-component.scss
           login-component.js
      --login-component
            home-component.html
            home-component.scss
            home-component.js
       --and so on ...
    app.component.html
    app.component.scss
    app.component.ts
    app.module.ts
    app.routing.ts
    --assets
    --environments
    --scss
      styles.scss
      _material2-theme.scss
      _variables-scss
      _utilities.scss
      _reset.scss
   favicon
   index.html
   and so on ....

В angular -cli.json Я изменил стили, чтобы посмотреть на scss/style.scss

...
"styles": [
        "scss/styles.scss"
      ]
...

_material2-theme.scss выглядит так:

//////////////////////* THEMES */ Custom Blue Theme*/
@import '[email protected]/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-light-blue);
$app-accent:  mat-palette($mat-light-blue, A200, A100, A400);
$app-theme:   mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($app-theme);

/*default palette forground/background*/
$light-foreground-palette: map-get($app-theme, foreground);
$light-background-palette: map-get($app-theme, background);

$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);

и внутри style.scss Я импортирую все, чтобы скомпилироваться с помощью компилятора scss cli

//////////////////////* CUSTOM */
@import "_material2-theme.scss";
@import "_reset.scss";
@import "_utilities.scss";
 //////////////////////* COMPONENTS */
 @import "~app/components/login/login.component.scss";

Мой вопрос заключается в том, что после того, как scss был скомпилирован, у нас есть в html head многие теги стиля, некоторые из которых дублируются и выглядят как:

Все, кажется, скомпилировано в одном стиле, который добавлен в голову (та, которая имеет атрибут типа), и после этого каждый компонент scss разбивается в каждом компоненте css с его отдельным стилем в голове, и это очень странно. Я делаю что-то неправильно или просто так работает рабочий материал2?

Ответ 1

Поведение, которое вы видите, вызвано ViewEncapsulation.Emulated, определенным для материальных компонентов.

Во-первых, вам не нужно добавлять стили для компонентов в глобальные стили "scss/styles.scss":

//////////////////////* COMPONENTS */
@import "~app/components/login/login.component.scss";

Если вы это сделаете, помимо дублирования стилей вы потеряете инкапсуляцию стиля, потому что стили, добавленные для components/login/login.component.scss, станут глобальными.

Теперь, на вопрос , почему есть много элементов style. Когда вы используете ViewEncapsulation.Emulated, и это режим инкапсуляции по умолчанию, Angular поместит каждый стиль компонента в свой собственный тег style и добавит атрибут к элементам внутри шаблона компонента. В материале все компоненты используют эмулированный режим инкапсуляции, поэтому для каждого компонента добавляется тег style.

Если вы добавите @Component({..., encapsulation: ViewEncapsulation.Native }) для своих компонентов, вы увидите, что style для ваших компонентов будет удален.

Вот логика, которая добавляет тег style:

export class DomSharedStylesHost extends SharedStylesHost implements OnDestroy {
  ...
  private _addStylesToHost(styles: Set<string>, host: Node): void {
    styles.forEach((style: string) => {
      const styleEl = this._doc.createElement('style');  <--- creates a style element
      styleEl.textContent = style;
      this._styleNodes.add(host.appendChild(styleEl));
    });
  }

Ответ 2

В вашей голове может быть несколько тегов style, которые могут быть вашими component связаны с некоторыми внешними различными css. Или вы написали внутренний css на соответствующей HTML-странице.

Если вы хотите, чтобы в приложении было всего один тег style, тогда в этом случае вам нужно написать весь стиль в одном файле.

Ответ 3

Я не думаю, что это связано с наличием отдельных стилей для каждого компонента. Эта проблема аналогична тому, что есть в ngularjs-material.

Angular-material включает в себя по умолчанию тему css как константную переменную в JavaScript.

Вы можете прочитать больше об этой проблеме, /questions/231166/how-to-get-rid-off-angular-material-extra-styles-and-css-linked-by-it-forcefully

Ответ 4

В дизайне материалов для Angular таблица стилей разбивается на:

style - поля, paddings etcetera, которые связаны с компонентом
тема - в основном цвета, которые строятся с использованием темы scss
типография - шрифты и свойства шрифта, которые создаются с помощью типографики scss

Это вызывает аналогичные селектора, но с разными свойствами внутри.

Я думаю, что это живой сервер разработки, который поставляется с Angular cli или webpack, который загружает css динамически, что вызывает дублирование тегов стиля. Я считаю, что это не происходит в сборке.

PS. Странно из вас добавить _reset.scss после всего остального.

Ответ 5

В разработке angular cli или webpack компилирует каждый файл css/scss из каждого компонента в тег стиля на странице HTML.

т.е. в вашем случае: login-component.scss, home-component.scss будут загружены внутри отдельных тегов стиля на странице HTML.

Все они будут скомпилированы в один файл css и будут связаны в index.html в файле conf.

Итак, я тоже думаю, что его способ angular работает!

В настоящее время я вижу, что в сборке ng build --prod создается только один файл.