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

Question

我正在尝试在使用angular2-busyCLI创建的角度项目中使用该库,但是在导入样式表时遇到问题:

<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

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

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

您可以在此链接中找到更详细的解释和更多替代方案

Answer 3

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

1. 在angular.json 中删除“样式”下对 CSS 文件的所有引用。它现在应该是这样的：

     "styles": [],
   

2. 将您的链接添加到“src”文件夹下index.html 中的外部 CSS 文件。将您的链接路径添加到您的 CSS 文件中，从“src”文件夹开始，包括“styles”文件夹（见下文）。现在，只要这些文件文件夹位于“src”根文件夹下的某个位置，您就可以将 css 存储在项目中的任何位置。我的项目中用于以下路径的物理 CSS 文件现在位于“src/styles”下。所以链接路径应该只是我的样式文件夹加上文件名：

   <link href="styles/mystyles.css" rel="stylesheet" />

3. 您需要在项目中的bootstrap、font-awesome等任何 CSS 文件都必须从项目中的“node_modules”文件夹手动复制到“src”文件夹下的文件夹中，就像上面#中的 CSS 文件一样2. 或者您可以从一些完全合格的 url 在线引用它们。如果您想在“index.html”中创建指向它们的链接或将它们导入 #2 中的 CSS 文件，这也将起作用。如果您之前从“node_modules”文件夹导入它们，那么该路径现在将不起作用，因为 Angular CLI 或 webpack 不会解析这些路径，因为它现在不编译您的 CSS。所以将它们更改为指向上面的本地文件夹路径。

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

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

4. 在上面相同的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 级联规则。

祝你好运！