Angular2 模块级样式表

我正在使用模块化结构设计我的网站sass /questions/tagged/sass我愿意以这样的方式组织样式表：在每个模块级别（而不是组件级别）定义样式表，然后将其导入所有组件中以保持整个模块的标准布局。

那么这是一个好方法吗？

如果是的话，有没有一种方法可以从module.ts文件到所有组件。以非常相似的方式，可以使用以下方式提供服务：providers。这将免除我在所有组件中单独导入相同 CSS 文件的痛苦。

假设我们的角度应用程序具有以下结构

+-- src
|   +-- app
|   |   +-- customer
|   |   |   +-- customer.scss
|   |   |   +-- customer.module.ts
|   |   +-- product
|   |   |   +-- product.scss
|   |   |   +-- product.module.ts
|   +-- sass
|   |   +-- _common.scss
|   |   +-- app.scss
|   |   +-- project-level-styles.scss

我们可以像这样设置项目级别的 sass 文件：

@import 'common';

// project level classes
@import 'project-level-styles';

// module level classes
@import '../app/customer/customer.scss'
@import '../app/customer/product.scss'

那么在这些customer.scss and product.scss我将拥有该模块内许多组件中通用的类。

应该注意的是，当您不在组件级别创建样式表并将其放在其他位置（例如模块或项目目录内）时，Angular 处理这些样式的方式是不同的。

角度组件样式 https://angular.io/guide/component-styles

Angular 可以将组件样式与组件捆绑在一起，从而实现比常规样式表更加模块化的设计。您放入组件样式中的选择器仅适用于该组件的模板内。

因此请注意，任何与组件无关的样式表styleUrlsarray 它可以应用于您网站中的任何元素（如果您不使用特殊性）。它不仅仅适用于该模块，因此这可能不是适合所有情况的解决方案，但这是我为我的模块所做的事情，理解这一点我可以通过定位根在该模块化样式表中编写我的样式以特定于该模块该模块的元素...

组件与全局

在我的应用程序中我的customerModule有一个名为的根组件customerComponent我在该 html 中有一个根元素，它具有以下类别：

customer-container

所以在我的里面customer.scss我可以像这样添加所有样式：

.customer-container .info-heading {
  font-size: 15px; color: #333;
}

.customer-container .section-divider {
  margin-top: 1em; border-top: 1px solid #dfdfdf;
}

因此，我现在可以实现一定程度的特异性，防止我的样式渗透到其他项目组件中。