將Html樣式表添加到Angular應用程序

我正在製作一個Angular web應用程序來替換現有網站。說現有的網站已經有一個樣式表，並且由於Angular允許我將我的前端代碼直接複製並粘貼到新的應用程序中，我想使用相同的樣式表。但其近22000行的長度，使其內聯是不可能的。將Html樣式表添加到Angular應用程序

我把它添加到我的文件目錄，並把它添加到我的app.component.ts 像這樣：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.BigHugeMess.css'] 
}) 

export class AppComponent { 
    title = 'app'; 
}

這種方法會導致我的應用程序失敗試圖運行時。說：

./app.color.ts無法在當前目錄

找到，但我從未創建過color.ts。

將這個樣式表文件綁定到我的Angular應用程序的最佳方式是什麼？因爲我使用的方式顯然不起作用。

來源

2017-07-28 RaptorJesus

的你發佈的代碼看起來是正確的。考慮通過應用程序搜索'app.color.ts'來查看它是否確實在某處定義。 – DeborahK

您的項目中是否有其他組件，服務，課程等？ – Vega

檢查該錯誤的所有文件 – Sreemat

如果您不打算按組件將CSS分解爲更易於管理的塊，並且您只是尋找一種快速而骯髒的解決方案，則可以將CSS文件直接鏈接到index.html文件中標準樣式表編號：

<link rel="stylesheet" href="./css/app.BigHugeMess.css">

然後，只需將該文件放在項目根目錄的css目錄中即可。

我強烈建議打破樣式並將樣式與適當的組件關聯。 22,000行CSS非常龐大，如果在那裏沒有很多冗餘代碼，我會感到驚訝。爲了構建一個可維護的應用程序，您必須掌握這一點，並且在一開始就是最好的時機。

至於爲什麼當文件坐落時出現錯誤，可能是您的網絡包配置中有處理css文件，或者期望scss文件和未正確處理css文件的內容，很難說沒有看到更多的你的項目。

來源

2017-07-28 23:09:12

我正在使用大文件，以確保在基本我的應用程序將起作用。那麼我將開始切入樣式並將每個樣式分配給它自己的組件。它是一大塊遺留代碼，我將需要作爲翻新此網站的一部分進行編輯。那麼你是否會建議把它分解成一系列可以鏈接到需要它的組件的資產？（例如color.css，fonts.css等） – RaptorJesus

每個項目都會有所不同。我會尋找基礎樣式來爲所有事物定義規則，並將它們遷移到app.css文件中，然後查找特定於頁面或節的css部分，並查看是否可以將它們分開。大量的css文件通常存在，因爲編碼器將每一頁視爲異常並添加了頁面特定的樣式，而不是使用更少的更一般的樣式來強化整個項目的一致性。清理東西需要做很多工作，但是要試着理解爲什麼風格在那裏，這會幫助你找到放置它們的地方。 –

我建議你將樣式表添加到angular-cli.jsonstyles數組中，直接由角度應用程序引用。

"styles": [ 
     "../location of your custom stylesheet", 
     "styles.css" 
     ],

但是，作爲@Stephen指出你應該考慮打破你的樣式表將多個文件作爲，那麼你可以使用多個角度系統功能如View Encapsulation等，也修改樣式表的上下層次

來源

2017-07-30 18:38:54

將Html樣式表添加到Angular應用程序

回答

相關問題