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

为了给出我面对的确切场景，我试图使用Webpack将Zurb的Foundation包打包到我的应用程序中。看看捆绑的JS，基金会SCSS 是得到导入，但我不知道如何将它应用到我的应用程序的呈现。如何将全局样式应用于Angular2应用程序？

我的根组件的样式属性尝试了require('../../node_modules/foundation.scss/foundation.scss)，并且似乎对风格，组件的HTML，但是任何的子组件而不是HTML。

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

来源

2016-03-31 user1381745

-1

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

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

更新由于澄清的意见：

来源

2016-03-31 14:07:48 user2263572

你能上展开“全球CSS”组件以解释这将如何与Webpack一起工作？我不知道如何注入Webpacked CSS，而不需要它在JS文件中。 – user1381745

已更新的答案。问题是如何编译scss到css？如果是这样，有很多链接显示如何做到这一点。 – user2263572

编号Webpack正在将我的SCSS正确编译为CSS，并将该CSS注入到我的bundle.js文件中。我不知道该怎么做，然后将该CSS应用于（某些）整个文档，而不是通过该组件的styles属性的单独组件。由于没有独立的CSS文件可以参考你的例子，一个简单的链接标签是不够的（我希望...）。 – user1381745

您可以使用提取文本插件的webpack。 “它将输入块中的每个require（”style.css“）移动到一个单独的css输出文件中，所以你的样式不再被内联到javascript中，而是分离到一个css包文件（styles.css）中。体积很大，它会更快，因为样式表包与javascript包并行加载。“

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

只对css做这你不会修改，因为热重新加载将不可用。我认为你不会对foundation.css进行修改，所以只能创建一个单独的捆绑CSS为该

来源

2016-03-31 22:43:15

我可能会误解，但它听起来像你已经找到一种方法来包括主要基础的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范围限制为仅限此组件。

如果由于某种原因，在根组件这样做是不允许的，尝试创建具有ViewEncapsulation.None，然后只导入该组件到你的根应用程序组件

来源

2016-07-08 14:56:15 user1806692

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

回答

相关问题