Question

在角度CLI应用程序中，有一种方法可以不为特定组件加载集中式CSS / SCSS。 .angular-cli.json看起来像这样：

  "apps": [
    {
      "root": "src",
      ....
      ....
      "styles": [
        "styles.scss",
        "../node_modules/firebaseui/dist/firebaseui.css"
      ],
   ]

但是，对于一个组件，我不想加载styles.scss，因为它会通过覆盖它来破坏我的所有样式。它有一个解决方法/黑客来解决这个问题。

Answer 1

您可以加入组件selector -

encapsulation: ViewEncapsulation.None

参考链接： - https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

在加载所有集中式样式后，组件样式最后加载，因此，component.css可以覆盖parent.css，但parent.css不能覆盖component.css。但是，集中式（父）css将在整个应用程序中应用，如果不在组件本身中覆盖。

Answer 2

我能想到的唯一方法是使该组件使用ViewEncapsulation.Native。

使用Native Angular将使用真正的影子DOM，这意味着真正封装你的组件，因此没有样式会流出，并且不会注入来自祖先的样式。

但是，请确保您了解限制。

在角度CLI应用程序中，有一种方法可以不为特定组件加载集中式CSS / SCSS

2 个答案: