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 使用影子 DOM 的思想并将这些样式仅应用于其组件

ViewEncapsulation.Emulated The default view encapsulation Angular 2 尝试通过向组件内容添加一些标识类并设置它们的样式来模拟影子 DOM 的想法 ( .succ-message[_ngcontent-usm-6] {...} )

应用视图封装

import {ViewEncapsulation} from @angular/core;

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

我的假设

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