Angular - 在 index.html 中包含 CSS 文件

Angular - including CSS file in index.html

提问by ecain

I'm trying to use the angular2-busylibrary in an angular project created with the CLI, but am having an issue importing the stylesheet:

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

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

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

The browser is telling me that it cannot find the file, even with the correct path. I also checked that the file exists, and it does. When I take out the rel="stylesheet"I don't get the error, but then the the animations don't work.

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

Here is the package I am trying to use, if anyone is curious: https://www.npmjs.com/package/angular2-busy

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

回答by penleychan

Angular CLI have it's own way to initialize your global css/js.

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

They are located in .angular-cli.jsonconfiguration

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

Locate "styles":and add your css there

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

Example :

例子 ：

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

Hope that helps.

希望有帮助。

回答by yatharth varshney

Basically there are three different ways to do that :-

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

1. By adding it to the "styles" array in angular-cli.json file as is shown by @penleychan in his answer.

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

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

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

1. You can directly import the css file into styles.css file (or any other css file) that is included in "styles" array in angular-cli.json file by adding the @import statement at the top of that file.

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

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

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

1. Include the css file in index.html page by adding a link element.

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

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

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

You can find a more elaborated explanation and a few more alternatives at this link

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

回答by Sajeetharan

Try

尝试

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

回答by Stokely

Steps to Create an Angular Project with Linked CSS

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

1. In angular.jsondelete all the references to CSS files under "styles". It should look like this now:

    "styles": [],
   

2. In your index.htmlunder your "src" folder, add in your link references to your CSS files manually with paths starting at the "src" folder but not including it. You can store your css wherever you want in your project now as long as those folders of files are under your "src" root folder somewhere. My physical CSS files in my project for the path below now sit under "src/styles" but the link path should just be my styles folder plus the file name:

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

3. Any CSS files for bootstrap, font-awesome, etc. that you want in your project have to be manually copied from your "node_modules" folder in your project into a folder under your "src" folder, just like you CSS file above in #2. Or you can reference them from some fully qualified url online. If you want to create a link to them as above in "index.html" or import them into the CSS file in #2, that will also work. If you were importing them before from the "node_modules" folder that path will not work now as the Angular CLI or webpack wont be resolving those paths as its not compiling your CSS now. So change them to point to the local folder path above.

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

    "styles": [],
   

2. 在“src”文件夹下的index.html 中，手动添加对 CSS 文件的链接引用，路径从“src”文件夹开始，但不包括它。现在，只要这些文件文件夹位于“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。所以将它们更改为指向上面的本地文件夹路径。

If you dont want to link them you can simply import the two "min" versions of bootstrap and font-awesome CSS files and then drop them in the same folder as your main style sheet and import them into that stylesheet with these two tags:

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

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

1. In the same angular.jsonfile above, under the "assets" JSON setting, add a reference to the location of your CSS files in #2 and #3 so the builder can copy them into your dist folder. Note the new styles path at the bottom. If you have CSS in other folders you can add them here as well. This tells the builder to create the CSS directories in the dist folder and copy all the CSS files inside them, so when you build for production your index.html links point to the right CSS files on the server:

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/api",
     "src/styles"
   ],
   

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"
   ],
   

You now have a powerful set of link elements to all your CSS in the head of your index.html file and can edit them in the Angular project like you normally do, knowing they will work in both the Angular development test server and in your dist production copy. Your website will also benefit from browser caching of CSS one time in memory and permanent file caches.

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

It took me a day to dig through documentation and testing to figure out what should have been a natural part of any simple website with linked CSS. I'm sorry they made this so convoluted but this works great now. This simply removes your CSS from the compile and build angular system that pushes all your CSS into a javascript file and then embeds that in an inline style sheet block in the memory of your browser. Using your own linked CSS html tags is far superior and allows better caching and control of CSS cascade rules.

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

Good Luck!

祝你好运！

回答by Scornwell

You are missing the self closing / at the end of your code. It's possible the browser is not fixing this for you.

您缺少代码末尾的自关闭 / 。浏览器可能没有为您修复此问题。

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

Also removing rel="stylesheet" would definitely not fix the problem since the browser needs to know exactly what kind reference you are referring to.

同样删除 rel="stylesheet" 肯定不会解决问题，因为浏览器需要确切地知道您指的是哪种引用。

If fixing the closing tag does not work then your path is wrong. You can also try adding a ../ to the beginning of your path. This will make it relative to the folder the site is in.

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

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