Angular2模块级样式表

Question

我正在使用沙斯以模块化结构设计我的网站，并且我愿意组织样式表，以便在每个模块级别(而不是组件级别)定义样式表，然后导入所有组件中以保持整个模块的标准布局。

这是个好办法吗？

如果是，是否有方法将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中，我将拥有在该模块中的许多组件中常见的类。

应该注意的是，当您创建一个样式表(而不是在组件级别)，并将它放在其他地方(比如模块或项目目录中)时，角度处理这些样式的方式是不同的。

角分量样式

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

因此，请注意，与组件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

这是个好办法吗？

它的主观性。角模块帮助将应用程序组织成功能的内聚块。对于不同的块功能，我想要不同的样式吗？极不可能。

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

不是的。它只支持组件级别。解决办法是让所有模块组件都引用单个css文件。再一次，一个好的实践是模块化css并在组件级别使用它们。

Answer 3

是。当然，方法对于每个组件都有不同的样式表是好的。甚至角CLI也遵循同样的方法。你可以看一看，然后手拿：链接

这是个好办法吗？

是的，这是一个完美的方法，当涉及到安排文件结构的角度应用程序。

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

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