Angular - 包括 index.html 中的 CSS 文件答案

【问题标题】：Angular - including CSS file in index.htmlAngular - 包括 index.html 中的 CSS 文件
【发布时间】：2017-12-26 16:49:31
【问题描述】：

我正在尝试在使用 CLI 创建的 Angular 项目中使用 angular2-busy 库，但在导入样式表时遇到问题：

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">

浏览器告诉我它找不到文件，即使路径正确。我还检查了该文件是否存在，并且确实存在。当我取出rel="stylesheet" 时，我没有收到错误消息，但是动画不起作用。

如果有人好奇，这是我尝试使用的包： https://www.npmjs.com/package/angular2-busy

【问题讨论】：

尝试使用单个./ 所以<link rel="stylesheet" href="./node_modules/angular2-busy/build/style/busy.css">
没用。我怀疑这与Angular 有关，因为我不确定他们如何处理这样的全局 CSS 文件。
你在使用 angular-cli 吗？
@12seconds 是的，使用 Angular 4。

标签： css angular angular-cli

【解决方案1】：

Angular CLI 有自己的方式来初始化你的全局 css/js。

它们位于.angular-cli.json 配置中

找到"styles":并在那里添加你的css

例子：

"styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

希望对您有所帮助。

【讨论】：

由于某种原因，我仍然没有得到任何类型的动画，但我不确定是不是因为它没有得到 CSS 文件。
@ecain 我不熟悉这个插件，不过只是快速搜索了一下。它似乎需要在您的模板上使用<div [ngBusy]="busy"></div>。你有吗？还需要您将其导入您的 AppModule。
@ecain 你可以使用浏览器开发工具来解决这个问题吗？您可以通过 2 种方式执行此操作，即检查元素并查看是否存在。或者检查您的网络选项卡以查看样式是否已加载。
如果你知道样式是什么，你可以检查 styles.xxx.bundle.css 并查看它是否包含任何预期的类
是的，问题是bundle.css文件只用ng build生成，ng serve生成一个bundle.js文件，但过程和上面说的检查样式是否一样已添加

【解决方案2】：

基本上有三种不同的方法可以做到这一点：-

通过将其添加到 angular-cli.json 文件中的“样式”数组中，如 @penleychan 在他的回答中所示。

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

您可以通过在该文件顶部添加@import 语句，将css 文件直接导入到包含在angular-cli.json 文件的“styles”数组中的styles.css 文件（或任何其他css 文件）中。

@import "~bootstrap/dist/css/bootstrap.min.css";

通过添加链接元素将 css 文件包含在 index.html 页面中。

您可以在link找到更详细的解释和更多替代方案

【讨论】：

这应该是答案。

【解决方案3】：

使用链接 CSS 创建 Angular 项目的步骤

在 angular.json 中删除“styles”下对 CSS 文件的所有引用。现在应该是这样的：
```
  "styles": [],
```
在“src”文件夹下的 index.html 中添加指向外部 CSS 文件的链接。从“src”文件夹开始添加到 CSS 文件的链接路径，包括“styles”文件夹（见下文）。只要这些文件文件夹位于“src”根文件夹下的某个位置，您现在就可以将您的 css 存储在项目中的任何位置。我的项目中下面路径的物理 CSS 文件现在位于“src/styles”下。所以链接路径应该只是我的样式文件夹加上文件名：
您需要在项目中用于 bootstrap、font-awesome 等的任何 CSS 文件必须手动从项目中的“node_modules”文件夹复制到“src”文件夹下的一个文件夹，就像上面#2 中的 CSS 文件一样。或者您可以从一些完全合格的在线网址中引用它们。如果您想在“index.html”中创建指向它们的链接或将它们导入#2 中的 CSS 文件，这也可以。如果您之前从“node_modules”文件夹中导入它们，那么该路径现在将不起作用，因为 Angular CLI 或 webpack 不会解析这些路径，因为它现在不编译您的 CSS。所以把它们改成指向上面的本地文件夹路径。

如果您不想链接它们，您可以简单地导入两个“最小”版本的 bootstrap 和 font-awesome CSS 文件，然后将它们放在与主样式表相同的文件夹中，然后将它们导入到带有这两个的样式表中标签：

@import "bootstrap.min.css";
@import "font-awesome.min.css";

在上面相同的 angular.json 文件中，在“assets”JSON 设置下，添加对 #2 和 #3 中 CSS 文件位置的引用，以便构建器可以将它们复制到你的 dist 文件夹。注意底部的新样式路径。如果您在其他文件夹中有 CSS，您也可以在此处添加它们。这告诉构建器在 dist 文件夹中创建 CSS 目录并复制其中的所有 CSS 文件，因此当您构建用于生产时，您的 index.html 链接指向服务器上正确的 CSS 文件：
```
 "assets": [
   "src/favicon.ico",
   "src/assets",
   "src/api",
   "src/styles"
 ],
```

您现在在 index.html 文件的头部拥有一组强大的指向所有 CSS 的链接元素，并且可以像往常一样在 Angular 项目中编辑它们，知道它们将在 Angular 开发测试服务器和在您的 dist 生产副本中。您的网站还将受益于浏览器在内存中一次性缓存 CSS 和永久文件缓存。

我花了一天时间研究文档和测试，以找出任何带有链接 CSS 的简单网站的自然部分。很抱歉，他们让这件事变得如此复杂，但现在效果很好。这只是将您的 CSS 从编译和构建角度系统中删除，该系统将所有 CSS 推送到 javascript 文件中，然后将其嵌入到浏览器内存中的内联样式表块中。使用您自己的链接 CSS html 标记要优越得多，并且可以更好地缓存和控制 CSS 级联规则。

祝你好运！

【讨论】：

【解决方案4】：

试试

  <link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >

【讨论】：

仍然出现同样的错误。我应该补充一点，我也在使用Bootstrap，并且从 CDN 导入他们的 CSS 文件没有问题。
你的索引文件在哪里？根据这个需要调整路径
索引距离node_modules 文件夹1 个文件夹。我尝试使用.. 上一个文件夹，但它仍然不起作用。

【解决方案5】：

您在代码末尾缺少自关闭 / 。浏览器可能没有为您解决此问题。

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />

同时删除 rel="stylesheet" 肯定不会解决问题，因为浏览器需要确切知道您所指的参考类型。

如果修复结束标签不起作用，那么你的路径是错误的。您也可以尝试将 ../ 添加到路径的开头。这将使其相对于站点所在的文件夹。

<link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />

【讨论】：

链接末尾不需要/。
@ecain 如果您试图使您的代码与无法编译该行的旧浏览器兼容，您可以这样做。它不在链接的末尾，而是在 html 行的末尾。它是一个自结束标记 /，而不是超链接引用的结束 /。
明白了。不幸的是，这并没有解决问题。
@ecain 你能发布你的目录结构吗？这可能有助于我们找出您的链接不起作用的原因。尝试这样做。获取文件并将其添加到您的根 WWW 文件夹，然后使用其名称“busy.css”引用它