it-swarm.com.ru

Дублированные стили на голове и множество элементов <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 compiler

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

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

enter image description here

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

23
mcmwhfy

Поведение, которое вы видите, вызвано 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));
    });
  }
5
Max Koretskyi aka Wizard

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

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

4

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

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

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

3
Sajeetharan

В Material design для Angular таблица стилей разделена на:

  • стиль - поля, отступы и так далее, связанные с компонентом
  • тема - в основном цвета, которые строятся с использованием темы scss
  • типография - шрифты и свойства шрифта, построенные с использованием типографии scss

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

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

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

2
jornare

В разработке угловых или веб-пакетов компилирует все файлы CSS/SCSS из каждого компонента в теге стиля на странице HTML.

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

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

Так что я тоже думаю, что так работает угловая!

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

0
Vishnu