使用全局 styles.scss 控制每个 Angular 组件的 :host

Question

我注意到我的应用程序中每个视图都有一个这样开头的样式文件。

:host {
  display: flex;
  background-color: blue;
}
div.foo {
  background-color: red;
}

减少冗余并将一般定义移动到 styles.scss 似乎是一个明智的决定。这样做时，我注意到，虽然 DIV 样式继续按预期工作，但对伪选择器的影响消失了。

谷歌搜索给了我 I can't reach the host element from inside the component but it doesn't say anything about altering it from outside of it (which my global styles.scss certainly is). I also found a blog on Angular view encapsulation 深入讨论细节的地方，但是没有提到全局 styles.scss.

总而言之，我发现了很多关于处理 :host 的信息和很多关于应用全局 styles.scss 的信息。但是，我看到它们之间的交集相当有限。这种没有明确确认的情况通常意味着它是不可行的，或者至少是非常不鼓励的。

我是不是误解了文档中的观点？如果是这样，我如何从全局 styles.scss 控制 :host speudo-class？还是不能做的特例？

Answer 1

有一种方法可以为 SASS 定义您自己的导入路径，例如 node_modules 库，您需要做的就是在 angular.json 的选项部分创建一个 stylePreprocessorOptions 条目文件。您不需要使用 src\sass

包含所有内容

angular.json
"options": {
  "outputPath": "dist/App",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "src/sass/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/sass"
    ]
  },
  "scripts": []
},

现在在您的组件样式中只需导入 styles.scss。不要包含文件扩展名或首字母 ~

@import './styles.scss';

Answer 2

编辑

仅使用 CSS 的简单解决方案 - 在您的根组件中使用 :host>* { color: blue; }。

注意：此CSS规则只会在第一层设计组件，如果你想应用到应用程序的所有组件，你需要使用原始答案

原版

我一直在寻找一种优雅的方式来获得您所要求的，而我能够实现这一目标的最佳方式是使用 SASS。我做了一个实验，当继承一个定义为 :host 的 SASS 文件时，:host 选择器引用了继承它的组件。

经过尝试，下面的步骤和CSS;

一样

步骤（SCSS / CSS 测试）：

在src下添加新文件夹命名为styling（或任何你想要的），添加新文件名_base.scss（注意下划线）
在 _base.scss 中添加 :host
的样式
在您的组件 sass 样式中，在第一行添加 @import "~src/styling/base";
就是这样！

使用全局 styles.scss 控制每个 Angular 组件的 :host

Using global styles.scss to control :host of every Angular component

css

sass

pseudo-class

angular