我在着陆页组件和仪表板组件中使用了不同的 css，因此着陆页或仪表板无法根据 css 工作。当我从索引中删除时.html这两行：
<link href="./assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="./assets/css/paper-dashboard.css" rel="stylesheet"/>
在 angular.cli 中，我设置了：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"assets/sass/paper-kit.scss",
"assets/css/demo.css",
"assets/css/nucleo-icons.css"
]
我的组件(登录页面)工作正常，但仪表板无法正常工作。但是，当我将提到的两行添加到索引中时.html并且在 angular.cli 中我设置了：
"styles": [
"styles.css"
]
我的登录页面无法正常工作，但仪表板可以正常工作。我以如下所示的方式设置了styleUrls，但它们似乎无法正常工作。有人知道我该如何解决我的问题吗？我需要让两个组件正常工作。在我看来，我需要为每个组件单独设置 css，因为我尝试过但没有结果，但我不确定这是否是一个好主意？
@Component({
selector: 'dashboard-cmp',
moduleId: module.id,
templateUrl: 'dashboard.component.html',
styleUrls: [
'../../assets/css/paper-dashboard.css',
'../../assets/css/bootstrap.min.css'
]
})
更新
我注意到当 angular.cli 样式以这种方式显示时：
"styles": [
"styles.css",
"assets/css/bootstrap.min.css",
"assets/sass/paper-kit.scss",
"assets/css/demo.css",
"assets/css/nucleo-icons.css",
"assets/css/paper-dashboard.css"
]
我的仪表板组件工作正常，但登录页面无法正常工作。当我将样式更改为：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"assets/sass/paper-kit.scss",
"assets/css/demo.css",
"assets/css/nucleo-icons.css",
"assets/css/paper-dashboard.css"
]
我的着陆页组件工作正常，而仪表板无法正常工作。所以我尝试这样的事情 -dashboard.component.ts我设置了 styleUrls：['./dashboard.component.css']，dashboard.component.css中添加了@import url('/../../assets/css/bootstrap.min.css');.不幸的是，登录页面仍然正常工作，而仪表板无法正常工作。知道为什么吗？
组件是封装的魔法，就像你自己的房间而不是整个房子。当你只用你父母为你的房子决定的油漆(索引.html)粉刷你的房间(组件)时，油漆在外面就看不到了。当你想像你父母告诉你的那样粉刷房子时，整个房间(索引.html)，或者如果你想要定制房间，只在你的房间里粉刷(组件)
在角度CSS中有两个作用域，即全局作用域和组件作用域。在全局范围内定义的 Css 通过所有组件中的应用手段应用。对于全局范围，请在index.html文件中包含 css，或在文件的styles部分中注册.angular-cli.json。
在angular-cli.json文件中
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
元数据中指定的样式仅适用于该组件@Component模板中。
在组件中
styleUrls: [
'./paper-dashboard.css'
]
https://angular.io/guide/component-styles