在所有模块中使用通用 CSS，Angular 2 RC6答案

【问题标题】：Using common CSS across all modules, Angular 2 RC6在所有模块中使用通用 CSS，Angular 2 RC6
【发布时间】：2016-09-14 07:25:56
【问题描述】：

我愿意使用通用 css，即我的根 css 跨应用程序的所有模块。这可以通过在所有组件中单独添加 styleUrls 标签的 css 路径来实现。还有其他方法吗，比如在 NgModule 级别包含 css？

【问题讨论】：

为什么不将它添加到您的 index.html 标头中，这应该可以工作
我希望它的模块明智，应用程序很大，每个模块都有自己的共同设计元素。

标签： css angular angular-material2

【解决方案1】：

如果将样式添加到index.html 页面，它们将应用于所有组件，但不会应用视图封装模拟。

除此之外，我不认为 Angular2 本身提供任何东西。

【讨论】：

如果我想拥有模块化的通用 css 怎么办？
我很确定 Angular2 没有提供任何东西。也许某些构建工具可以将样式添加到您的组件的styleUrls（不是我的专业领域）。
使用 SASS 和导入等预处理器怎么样？
还没有尝试过使用 SASS，它是普通的香草 css。

【解决方案2】：

我今天也想知道。没有模块化 CSS 的功能，所以我最终使用 Sass 导入来实现我需要做的事情。

请注意，虽然它是重复的，但它比拥有一个应用程序范围的 CSS 更好，这超出了封装的目的。

给定以下文件结构：

my-component/
 ├──first/
 │   ├──first.component.ts     * first component
 │   ├──first.component.scss   * first component's SCSS
 │   └──...                    * first component's module, html etc.
 │
 ├──second/
 │   ├──second.component.ts    * second component
 │   ├──second.component.scss  * second component's SCSS
 │   └──...                    * second component's module, html etc.
 │
 ├──my-component.module.ts     * my component's module 
 ├──my-component.routes.ts     * my component's routes 
 └──_shared.scss               * the shared partial SCSS

我将_shared 部分导入我的first.component.scss 和second.component.scss，如下所示：

@import '../shared';

【讨论】：