Css 使用global styles.scs控制：每个角度组件的主体

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

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

减少冗余并将通用定义移到styles.scs似乎是一个明智的决定。这样做时，我注意到，尽管

DIV

样式继续按预期工作，但对伪选择器的影响消失了

谷歌给了我这一点，但它并没有说要从它的外部改变它（当然是我的global styles.scss）。我还发现了一个博客，其中详细内容进行了深入讨论，但没有提到global styles.scs

总而言之，我发现了很多关于处理

：host

的信息，以及很多关于应用global styles.scs的信息。然而，我看到它们之间的交集相当有限。这种缺乏明确确认的情况通常意味着这是不可行的，或者至少是非常令人沮丧的

---

我是否误解了文件中的观点？如果是这样，我如何从我的global styles.scs控制

：host

speudo类？或者这是一种特殊情况，没有也无法完成？

有一种方法可以为SASS（如node_模块库）定义自己的导入路径，您只需在angular.json文件的选项部分创建一个StylePreprocessions条目。您不需要使用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.scs即可。不要包含文件扩展名或首字母~

@import './styles.scss';

编辑

仅使用CSS的简单解决方案-

：host>*{color:blue；}

在根组件中

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

原创

我一直在寻找一种优雅的方式来满足您的要求，而我能做到这一点的最好方式就是使用SASS。 我做了一个实验，发现当继承一个带有

：host

定义的SASS文件时，

：host

选择器引用继承它的组件

尝试之后，以下步骤与CSS的工作原理相同

步骤（SCSS/CSS测试）：

在名为

样式设置
的
src
下添加新文件夹（或您想要的任何内容），在新文件名
内添加
（注意下划线）

在

\u base.scss内部添加
:host的样式

在组件

sass

style中，在第一行添加

@import“~src/style/base”

就这样

---

所以无法将其保存在default styles.scss文件中？我这样问是因为该文件的定义自动可用，而无需导入它们。如果我在其中定义了一个

div.bordered

，并在任何

div

上设置了该类，我会立即获得样式。您可以使用schematics通过CLI将导入添加到任何生成的组件，并在现有组件中强制导入行。我希望有一种方法不需要在我的组件的SASS文件中使用显式的

@import

语句。现在，声明组件/类的样式在应用程序中随处可见，无需显式导入。但是，伪类不是。这让我很烦。：）@KonradViltersten在您的根组件中，css选择器

：host>*{color:blue；}

是怎么回事，我不喜欢这种攻击，因为它可能在css继承方面有一些问题，但值得一试，但很好。我可以接受。请将其添加为您答案的备选方案，以便我们删除评论。完成后请告诉我，这样我才能接受正确答案。