除非放在/ src目录中，否则angular项目中的CSS不适用

Question

问题：

---

我有一个带有很多组件和子组件的角度应用程序。 这些是通过运行ng generate component <component-name>因此每个ng generate component <component-name>都具有相同的组件标记样式：

@Component({
    selector: 'app-<component-name>',
    templateUrl: './<component-name>.component.html',
    styleUrls: ['./<component-name>.component.css']
})

我的理解是，与该组件相关的所有CSS都应该放在src/<component-name>/<component-name>.component.css并且应该在呈现时自动应用于组件。

然而，情况似乎并非如此，因为当我在CSS文件中放入某些指令时，它们似乎被忽略了。 到目前为止最值得注意的是像text-align和任何color标记的东西，而像font-family或vw / vh这样的标签工作得很好。

另一方面，当我将我的CSS放在像src/styles.css这样的文件src/styles.css并在index.html为这个文件放置一个导入时，我在那里使用的任何CSS都正确应用但是它适用于所有组件。 这不会是一个问题，除了一些组件必然共享命名约定，我无法指定我不是指table2.component.ts [col-id="car"]而是[col-id="car"] table5.component.ts [col-id="car"] 。

编辑：

这是我正在谈论的一个例子：

我当前的网格看起来像这样：

给定列中的所有单元格共享col-id标记的值：

我的slab-grid.component.css文件包含网格本身的大小调整说明和字体说明符：

.slab-grid {
    width: 45vw;
    height: 80vh;
    font-family: monospace;
}

我知道这些应用正确，因为如果我删除大小定义，网格变为1px乘1px，如果我删除font-family ，整个网格将变回正常字体，如下所示。 列“Thk”不会更改回来，因为应用程序另一部分中的另一个网格具有相同的col-id ，并且总体styles.css文件包含[col-id="thk"] ：

所以在我的理解中，我是否要将以下语句添加到slab-grid.component.css

[col-id="yard_seq"] {
    text-align: right;
}

我希望我会看到col-id="yard_seq"列Yard Seq变为右对齐。 实际上，当我将此语句添加到slab-grid.component.css ，没有任何变化。 但是，如果我转到位于src/styles.css的项目的主css文件并添加相同的语句，我得到以下结果：

题：

---

• 如果放在src/<component-name>/<component-name>.component.css为什么我的CSS并不总是适用于相关src/<component-name>/<component-name>.component.css ？

要么

• 是否有一种方法可以使src/styles.css的元素仅在呈现某些组件时应用于页面？

解：

---

我找到了一个可接受的解决方案来解决这个问题。 如果我从[col-id="thk"]修改我自己的/src样式选择器以使用后代选择器.slab-grid [col-id="thk"] ，那么我可以使我的样式覆盖冲突的样式!important而不编辑冲突的文件。

Answer 1

如果你想在多个组件之间共享相同的样式，你必须创建一个共享的CSS文件，然后在styles.css上导入文件或更好的解决方案在angular.json配置文件上添加共享的CSS文件，每个组件都有样式的hes 。

父组件的样式不适用于子组件。

仅当且仅在styles.css上添加相同样式或将文件包含在angular.json上时才有效

例

            "styles": [
              "src/styles.scss",
              "src/scss/theme.d.scss",
              "src/scss/global-scrollbar.d.scss",
              "src/scss/acrylic.scss",
              "src/scss/buttons.scss",
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js"
            ]