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

Question

我正在嘗試在使用 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

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 級聯規則。

祝你好運！

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