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

Posted 2023-03-13

【中文标题】在 index.html 中导入 css 和在 Angular 5 中导入 styleUrls 的区别

【英文标题】：Difference between importing css in index.html and styleUrls in Angular 5

【发布时间】：2018-09-24 09:40:52

【问题描述】：

我在登录页面组件和仪表板组件中使用了不同的 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');。不幸的是，登陆页面仍然正常工作，而仪表板却没有。任何想法为什么？

【问题讨论】：

为什么要将 bootstrap.min.css 添加到组件而不是 angular-cli.json 中的应用程序？

因为当我在登陆页面和主面板中使用不同的 css 时，登陆页面或主面板都不能根据 css 工作。所以我决定将这些 css 分别添加到登录页面组件和主面板中。你认为这不是一个好主意吗？

../../assets 会告诉浏览器在项目文件夹之外查看。也许试试 ../assets 也许 ./assets

@rickz 但是有我的资产目录。我更新了我的问题，并更清楚地解释了我的问题。

@JohnSmith 我认为您的仪表板 css 路径不正确。 paper-dashboard.css 在哪个文件夹中。

【参考方案1】：

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

【讨论】：

我在登陆页面和主面板中使用了不同的 CSS，因此登陆页面或主面板都不能根据 CSS 工作。所以我决定将这些 css 分别添加到登录页面组件和主面板中。这相当于以不同的方式单独喘气。但是，正如我所描述的那样，它不起作用。你知道我该如何解决这个问题吗？

【参考方案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

【讨论】：

我更新了我的问题，并更清楚地解释了我的问题。有什么想法可以解决这个问题吗？