在 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

组件是封装的魔法，它就像你自己的房间而不是整个房子。当你只用你父母为你的房子决定的油漆（index.html）粉刷你的房间（组件）时，油漆在外面是不可见的。当你想像你父母告诉你的那样粉刷房子时去外面作为一个整体（index.html），或者如果您想要自定义房间，请仅在您的房间（组件）中绘制

Answer 2

在 Angular css 中有两个作用域，即全局作用域和组件作用域。在全局范围内定义的 CSS 通过应用方式应用到所有组件中。对于全局范围，请在 index.html 文件中包含 css 或在 .angular-cli.json 文件的 styles 部分中注册。

在 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