Angular2 + Webpack，在头部加载样式两次

Question

我正在尝试使用带有Angular2的通用+ webpack。 但是我无法弄清楚为什么样式会在head元素上加载两次。

这是我分享的git repo，我没有改变任何东西！ https://github.com/angular/universal-starter.git

我可以在这里写代码，但它会变得一团糟。

Bellow是我的控制台屏幕截图，显示了两次加载相同的样式：

任何人都可以解释Angular2与css的行为吗？

提前致谢。

Answer 1

我还没看过回购（最后我假设问题是什么），但是回答你关于角度与css表现如何的问题：

将样式插入角度

有多种方法

样式插入

1-组件内联样式

@Component({
    selector: 'sample',
    styles: [`
        p {
            color: #999;
        }'],
    template: '<p>Hello World</p>'
})

2-外部样式表

@Component({
    selector: 'sample',
    styleUrls: ['./styles.css'],
    template: '<p>Hello World</p>'
})

3-模板内联样式

@Component({
    selector: 'sample',
    template: `
        <style>
            p {
                color: #888;
            }
        </style>
        <p>Hello World</p>
    `,
})

在这3种方法中，所有样式都将放在生成的html的头部。

4- Html内联样式

@Component({
    selector: 'sample',
    template: '<p style="color: #999;">Hello World</p>'
})

样式将保留在标记中，并且仅应用于组件的此特定部分

查看封装

根据封装的前3种类型，样式要么应用于整个应用程序，要么只应用于一个组件

ViewEncapsulation.None angular 2没什么特别的

ViewEncapsulation.Native Angular 2使用了shadow DOM的想法，并将这些样式仅应用于它的

组件

ViewEncapsulation.Emulated The default view encapsulation Angular 2尝试通过向组件的内容添加一些标识类并设置样式来模拟shadow DOM的概念（.succ-message [_ngcontent-usm-6] {...}）

应用视图封装

import {ViewEncapsulation} from @angular/core;

@component({
   selector: ...
   template: ...
   styles: ... (or styleUrls)
   encapsulation: ViewEncapsulation.None,
})

我的假设

可能您会发现这些样式包含在两个不同的组件中。