Angular2模块级样式表

Question

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

那么这是一个好方法吗？

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

Answer 1

因此，假设我们的 angular 应用程序中有以下结构

+-- 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 可以将组件样式与组件捆绑在一起，从而实现比常规样式表更加模块化的设计。您放入组件样式的选择器仅适用于该组件的模板。

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

组件 vs 全局

在我的应用程序中，我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 CLI 也遵循相同的方法。您可以查看并实践：LINK

那么这是一个好方法吗？

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

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

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