Question

为了给出我面对的确切场景，我正在尝试使用Webpack将Zurb的Foundation包捆绑到我的应用程序中。查看捆绑的JS，基础SCSS 已导入，但我不确定如何将其应用于我的应用程序的渲染。

我在根组件的样式属性中尝试了require('../../node_modules/foundation.scss/foundation.scss)，这似乎确定了该组件的HTML样式，但不是任何子组件的HTML。

这样做的正确方法是什么？

Answer 1

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

如果是这种情况，那么我认为您需要设置要使用的根组件：封装：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
})

ViewEncapsulation.None基本上表示不要将css范围限定在此组件中。

如果出于某种原因不允许在根组件中执行此操作，请尝试创建＆＃39; global-css＆＃39;具有ViewEncapsulation.None的组件，然后将该组件导入到您的根应用程序组件

Answer 2

您可以使用网络包的提取文本插件。 “它将条目块中的每个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文件，则应将它们应用于整个应用程序。

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

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

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

3 个答案: