如何将样式全局应用于Angular2应用程序

Question

为了给出我所面临的确切场景，我正试图使用Webpack将Zurb的Foundation包捆绑到我的应用程序中。查看捆绑的JS，Foundation SCSS正在被导入，但我不知道如何将其应用于应用程序的渲染。

我在根组件的样式属性中尝试了require('../../node_modules/foundation.scss/foundation.scss)，它似乎确实对该组件的HTML进行了样式化，但对任何子组件的HTML都没有进行样式化。

正确的方法是什么？

Answer 1

我可能有误解，但听起来你已经找到了将主基础css包含在根组件中的方法，但这个css没有应用于任何其他组件，对吗？

如果是这种情况，那么我认为您需要设置根组件以使用：encapsulation:ViewEncapsulation.None

在你的根组件中，你需要导入这个：

import {ViewEncapsulation} from '@angular/core';

然后这样做：

@Component({
   moduleId: module.id,
    selector: 'global-css',
    templateUrl: 'global-css.component.html',
    styleUrls: ['global-css.component.css'],
    encapsulation: ViewEncapsulation.None
})

None基本上说不要将css的范围仅限于这个组件。

如果出于某种原因，不允许在根组件中执行此操作，请尝试创建一个具有ViewEncapsulation的"全局css"组件。无，然后将此组件导入根应用程序组件

Answer 2

您可以使用webpack的提取文本插件。"它将条目块中的每个require（"style.css"）移动到一个单独的css输出文件中。因此，您的样式不再内联到javascript中，而是在css捆绑文件（styles.css）中分离。如果您的样式表总量很大，则会更快，因为样式表捆绑是与javascript捆绑并行加载的。"

https://github.com/webpack/extract-text-webpack-plugin

只对您不会修改的css执行此操作，因为热重载不可用。我想你不会修改foundation.css，所以只为创建一个单独的捆绑css

Answer 3

如果在根文件夹的index.html文件中包含css文件，则它们应该应用于整个应用程序。

否则，您可以使用组件元数据中的样式属性将特定的css文件包含到特定的组件中。

由于评论中的澄清而更新：