Angular2模块级样式表

Question

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

那么这是一个好方法吗？

如果是，是否有一种方法可以将CSS从module.ts文件导出到所有组件。 以非常类似的方式，使用providers 。 这将节省我在所有组件中单独导入相同CSS文件的痛苦。

Answer 1

因此，假设我们在角度应用程序中具有以下结构

+-- 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和product.scss我将拥有在该模块中的许多组件中通用的类。

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

角度组件样式

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

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

组件与全局

在我的应用程序中，我的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;
}

所以我现在可以达到某种程度的特异性，使我的风格不会流血到其他项目组件中。

Answer 2

那么这是一个好方法吗？

它的主观性。 Angular模块有助于将应用程序组织成一致的功能块。 我想要不同的块功能吗？ 不大可能。

是否有方法将CSS从module.ts文件导出到所有组件。

不，它仅在组件级别受支持。 解决方法是让所有模块组件引用单个css文件。 然后，一个好的做法是将css模块化并在组件级别使用它们。

Answer 3

是。 绝对方法很适合为每个组件设置不同的样式表。 即使是Angular CLI也遵循相同的方法。 你可以看看并亲自动手： LINK

那么这是一个好方法吗？

是的，这是为Angular应用程序安排文件结构的完美方法。

如果是，是否有一种方法可以将CSS从module.ts文件导出到所有组件。

默认情况下，Angular CLI不为模块提供任何样式表，它也是有意义的。 为什么在模块级别需要样式表？ 您可以在组件级样式表中添加与组件​​相关的样式，另外如果您希望在项目级别可以添加一个样式表，您可以在其中添加项目的所有常用样式。