css - 在 index.html 中导入 css 和在 Angular 5 中导入 styleUrls 之间的区别

Question

我在登陆页面组件和仪表板组件中使用了不同的 css，因此登陆页面或仪表板无法根据 css 工作。当我从 index.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"
      ]

我的组件(着陆页)工作正常，但仪表板不工作。但是，当我在 index.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');。不幸的是，登陆页面仍然正常工作，而仪表板却没有。有什么想法吗？

Answer 1

组件是封装的魔法，它就像你自己的房间而不是整个房子。当你只用你 parent 为你的房子 (index.html) 决定的油漆粉刷你的房间(组件)时，这些油漆在外面是看不到的。当你想像你 parent 告诉你的那样去外面粉刷房子作为一个整体(index.html)，或者如果你想要定制房间，只在你的房间(组件)上绘画