Javascript 头部重复的样式和大量<；风格>；元素

我对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 ....

//////////////////////* THEMES */ Custom Blue Theme*/
@import '~@angular/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);

在angular-cli.json中，我修改了样式以查看scss/style.scss

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

_material2-theme.scss看起来像：

.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 ....

//////////////////////* THEMES */ Custom Blue Theme*/
@import '~@angular/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";

我的问题是，在SCS编译之后，我们在html头部有许多样式标记，其中一些重复，看起来像：

---

所有的东西似乎都是以一种添加在head中的样式（即具有type属性的样式）编译的，然后每个scss组件在每个css组件中以其单独的样式在head中拆分，这非常奇怪。我做错了什么，或者只是工作材料2？

在角度材料设计中，样式表分为：

• 样式-从组件链接的边距、填充物等
• 主题-主要是使用主题SCS构建的颜色
• 排版-使用排版SCS构建的字体和字体属性

这会导致类似的选择器，但其内部具有不同的属性

我认为是LiveDevelopmentServer提供了AngularCLI或webpack，动态加载css，从而导致样式标记的重复。我相信这不会发生在生产构建中

---

PS.你真奇怪，竟然在其他东西之后添加了_reset.scss。

在开发过程中，angular cli或网页包将每个组件中的每个css/scss文件编译到HTML页面中的一个样式标记中

例如，在您的例子中：login-component.scss、home-component.scss都将加载到HTML页面中不同的样式标记中

所有这些都将被编译成一个css文件，并在生产配置的index.html中链接

所以我也认为这就是角度的工作方式

---

目前我看到在生产构建中只生成了一个文件--prod。

在你的头脑中有多个

样式

标记，可能是你的每个

组件

都与一些外部不同的css链接，或者你在相关的HTML页面中编写了内部css

---

如果您希望整个应用程序中只有一个

style

标记，那么在这种情况下，您必须在单个文件中编写所有样式。

我认为这不是因为每个组件都有单独的样式。 这个问题也类似于a中的问题

Angular material

包含一些默认主题css，作为JavaScript中的常量变量

你可以阅读更多关于这个问题的文章，

---

您看到的行为是由

视图封装引起的。为材质组件定义了模拟的

首先，您不需要将组件的样式添加到全局样式中
“scss/styles.scss”
：

如果这样做，除了样式重复之外，还将丢失样式封装，因为为
组件/login/login.component.scss添加的样式将变为全局样式

现在，我们来回答一个问题：为什么有许多
样式
元素。当您使用
视图封装.Emulated
，并且它是默认的视图封装模式时，Angular会将每个组件的样式放入其自己的
样式
标记中，并将属性添加到组件模板内的元素中。在材质中，所有组件都使用模拟封装模式，因此为每个组件添加了
样式
标记

如果为组件添加
@Component（{…，封装：ViewEncapsulation.Native}）
，您将看到组件的
样式将被删除

添加
样式
标记的：

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));
    });
  }

导出类DomainSharedStylesHost扩展SharedStylesHost实现OnDestroy{
...
private\u addStylesToHost（样式：集，主机：节点）：void{
style.forEach（（style:string）=>{
const styleEl=this.\u doc.createElement（'style'））；请不要将单行和多行注释组合在一起。这看起来很奇怪。顺便说一句，你不需要在你的
材料主题
文件中再次包含
mate core
。我也很确定这是有意为动态主题工作的行为？@Edric是的，但这些注释不会帮助我解决问题和问题mat-core（）需要添加使用自定义主题的内容material2中的描述：。我真的不知道这是否是故意的行为…只是试图找到答案。你能设置一个演示github repo并问一个特定的问题吗？@AngularInDepth.com我想你可以启动任何小项目，包括Angle material，结果会很好同样，我也不确定是这样的，不管怎样，我需要一种方法，在头中只有一种样式，所有的scss文件都在其中编译。如果你也需要在开发配置中只有一个文件，你可以为此添加一个gulp任务。重置实际上是一些元素的规范化程序，比如p{margin:0；padding:0；}这就是为什么如果你真的需要它，它通常是页面上的第一件事。你的答案应该得到奖励，但是，是的..很好的stackoverflow操作…现在我看到了你的答案，我不能收回或重新应用我的观点：|@mcmwhfy，啊，我明白了，老实说，我不知道关于stackoverflow的政策。谢谢你接受我的答案恩。嘿，你的答案不正确，似乎不符合获得赏金的条件。@AngularInDepth.com：你怎么知道我的答案不正确？你试过了吗？给我错误答案的证据。他不必证明你错了。你必须证明你是对的。