Question

我尝试在使用CLI创建的角度项目中使用angular2-busy库，但是在导入样式表时出现问题：

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

浏览器告诉我它找不到文件，即使路径正确也是如此。我还检查了文件是否存在，确实存在。当我取出rel="stylesheet"时，我没有收到错误，但动画无法正常工作。

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

Answer 1

Angular CLI拥有初始化全局css / js的方法。

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

中

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

示例：

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

希望有所帮助。

Answer 2

基本上有三种不同的方法： -

将其添加到angular-cli.json文件中的“styles”数组中，如@penleychan在其答案中所示。

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

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

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

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

＆lt; link rel =“stylesheet”type =“text / css” HREF = “node_modules /引导/ DIST / CSS / bootstrap.min.css” /＆GT;

您可以在此link

Answer 3

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

在 angular.json 中，删除“样式”下所有对CSS文件的引用。现在应该看起来像这样：
```
 "styles": [],
```
在“ src”文件夹下的 index.html 中，手动添加指向CSS文件的链接引用，其路径从“ src”文件夹开始但不包括它。现在，只要这些文件文件夹位于“ src”根文件夹下的某个位置，就可以将CSS存储在项目中的任何位置。我在项目中用于以下路径的物理CSS文件现在位于“ src / styles”下，但链接路径应该只是我的样式文件夹加上文件名：

<链接href =“ styles / mystyles.css” rel =“ stylesheet” />
项目中想要的任何 bootstrap ， font-awesome 等CSS文件都必须手动从以下位置的“ node_modules”文件夹中复制将项目放入“ src”文件夹下的文件夹中，就像上面＃2中的CSS文件一样。或者，您可以从一些完全合格的URL在线引用它们。如果您想按上述方法在“ index.html”中创建指向它们的链接，或者将其导入＃2中的CSS文件中，那么也可以使用。如果您以前是从“ node_modules”文件夹导入它们的，则该路径现在将无法使用，因为Angular CLI或webpack不会解析这些路径，因为它现在无法编译CSS。因此，将它们更改为指向上面的本地文件夹路径。

如果您不想链接它们，则只需导入两个“最小”版本的bootstrap和字体超棒的CSS文件，然后将它们放到与主样式表相同的文件夹中，然后使用这两个文件将它们导入到该样式表中标签：

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

在上述相同的 angular.json 文件中的“资产” JSON设置下，添加对CSS文件在＃2和＃3中位置的引用，以便构建器可以将它们复制到您的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级联规则。

祝你好运！

Answer 4

尝试

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

Answer 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" />

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

5 个答案: