什么时候应该在 Angular 中使用 styles.scss，什么时候应该使用组件的 scss

Posted 2023-03-06

【中文标题】什么时候应该在 Angular 中使用 styles.scss，什么时候应该使用组件的 scss

【英文标题】：When should I use styles.scss in Angular and When should use the scss of a component

【发布时间】：2019-07-11 19:21:09

【问题描述】：

我有三个相同的组件：推荐产品轮播、折扣产品轮播、特色产品轮播。这些组件应用了一堆 CSS 样式。当然，那些 css 类几乎是相同的。我应该在每个组件上重复 css，还是应该将共享类放在全局 styles.scss 上。哪一个是最佳实践？如果使用全局 styles.scss，我会避免重复并且可以将更改应用到一个地方的组件。但是如果想在另一个项目中使用该组件呢？我必须选择styles.scss 文件中的所有类。同样，哪一个是最佳实践？

【参考方案1】：

组件样式用于封装样式。

编译后，你的风格，比如

.myClass  color: blue; 

变成

.myClass[ng_contentc0]  color: blue; 

ng_contentc0 是一个动态添加到组件的每个 html 标记的属性。这可以防止您的类从一个组件碰撞到另一个组件。

当使用全局样式表时，通常是styles.[ext]，您只需创建一个全局样式：具有该类的每个标记都将具有该样式。

在你的情况下，你不应该使用这些：你应该

创建一个名为 carousel.scss 或其他名称的新 CSS 文件 将该文件导入到所有 3 个组件装饰器中，位于 styleUrls（这是一个数组）下

使用这种技术，您可以创建一个封装的样式表，您可以在多个组件上使用它，并且不会与您可能已经制作/安装的任何外部 CSS 样式发生冲突。

【参考方案2】：

我认为没有最佳做法，最好的是最适合你的。

小项目一般不会太在意这些，只要能行就好了。

大型项目通常在扩展 CSS 方面遇到困难，迟早会在样式方面遇到瓶颈，并且更改任何内容都会破坏一切。缩放 CSS 有很多方法。

您可以使用BEM, SMACSS etc，可以帮助您轻松管理您的 CSS。

另一种基于组件的 CSS 方法是 scoped CSS，这正是您在 Angular 的组件文件中编写 CSS 时所做的事情，因为 Angular 有自己的填充范围。 （不应该使用/deep/）

这些组件应用了一堆 CSS 样式。当然 这些css类几乎相同

您可能必须重新想象组件的粒度或在 sass 中使用 mixin、继承等来管理您相同的功能

免责声明：我不是 CSS 专家。

【参考方案3】：

我认为这里真正的问题是为什么你有三个相同的组件。也许更好的选择是只使用一个以更通用的方式实现的组件，或者让一个组件包含三个不同的组件。

全局 styles.scss 是针对整个应用程序的，所以真正特定于组件的样式应该放在组件内部，重复的组件会导致重复的代码（包括 scss），所以你应该尽量避免这种情况。

【参考方案4】：

此问题的最佳解决方案是encapsulation: ViewEncapsulation.None，它将在您的全局样式部分添加您的样式。

因此您可以直接将组件复制粘贴到任何项目中。它会像魅力一样发挥作用。

这是一个例子：-

your.component.ts

import ViewEncapsulation from '@angular/core';

@Component(
  moduleId: module.id,
  selector: 'my-zippy',
  templateUrl: 'my-zippy.component.html',
  styles: [`
    .zippy 
      background: green;
    
  `],
  encapsulation: ViewEncapsulation.None
)
class ZippyComponent 
  @Input() title: string;

希望这会有所帮助