Angular2模块级别的样式表 [英] Angular2 module level stylesheets

问题描述

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

I am designing my website in a modular structure using sass and I am willing to organise the stylesheets in such a way that I define a stylesheet at each module level(instead of component level) and then import it in all the components to keep a standard layout for the entire module.

那么这是一个好方法吗?

So is this a good approach?

如果是，是否有方法将CSS从 module.ts 文件导出到所有组件.以非常相似的方式，使用 providers 提供服务.这样可以免去在所有组件中分别导入相同CSS文件的麻烦.

If yes, is there a method to export the CSS from the module.ts file to all the components. In a very similar way, the services are made available using the providers. This will save me the pain of importing the same CSS file in all the components individually.

推荐答案

所以可以说我们的角度应用程序具有以下结构

So lets say we have the following structure in our angular application

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

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

We can setup our project level sass file like so:

@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 中，我将拥有该模块中许多组件共有的类.

So in these customer.scss and product.scss I will have classes that are common throughout the many components inside that module.

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

It should be noted that when you create a stylesheet not at the component level and put it somewhere else like inside a module or project directory, the way angular treats those styles is different.

角度组件样式

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

Angular can bundle component styles with components, enabling a more modular design than regular stylesheets. The selectors you put into a component's styles apply only within the template of that component.

因此请注意，任何与组件 styleUrls 数组无关的样式表都可以应用于网站中的任何元素(如果不使用特定性).它不仅仅适用于该模块，因此这可能不是所有情况下的解决方案，但这是我为我的模块所做的事情，了解这一点后，我可以在模块化样式表中编写样式，使其针对特定于该模块的根目录该模块的元素...

So please be aware that any stylesheets not associated with the components styleUrls array it can be applied to any element in your site (if you don't use specificity). It's not applied only to that module, so this may not be a solution for all situations, but it's something that I do for my modules, understanding this I can write my styles in that modular stylesheet to be specific to that module by targeting the root element for that module...

组件vs全局

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

In my application my customerModule has a root component called customerComponent and I have a root element in that html that has a class of:

客户容器

因此在我的 customer.scss 中，我可以像这样放置所有样式:

So inside my customer.scss I can prepend all of my styles like this:

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

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

所以我现在可以达到某种程度的特异性，以防止我的样式渗透到其他项目组件中.

So I can now achieve some level of specificity that keep my styles from bleeding into other project components.

这篇关于Angular2模块级别的样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！