2017-05-23 51 views
5

我最近開始使用AngularCLI。我已將所有文件從Angular2轉移到AngularCLI項目。index.html不加載本地CSS

但它不是加載一些本地的css文件,但它正在加載其他css文件?

當前目錄是:

-src 
--index 
--styles.css 
--app 
---angular2-fullcalendar 
----fullcalendar.min.css 

的index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Cudyangularcli</title> 
    <base href="/"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <link rel="stylesheet" type="text/css" href="../src/app/angular2-fullcalendar/fullcalendar.min.css" > 
</head> 
<body> 
    <app-root>Loading...</app-root> 
</body> 
</html> 

錯誤是: enter image description here

+0

from angular-cli自述文件:「您可以通過angular-cli.json中的apps [0] .styles屬性添加更多全局樣式。」 https://www.npmjs.com/package/angular-cli#global-styles – n00dl3

+0

我認爲路徑是錯誤的,當你運行你的應用程序時,你的應用程序的根目錄被設置爲'src'文件夾,在這種情況下你應該重定向到'/ app/...'。 – hakany

+0

@hakany嘗試過。仍然是同樣的錯誤。 – User1911

回答

8

這不加載,因爲你需要使用angular-cli.json文件添加CSS文件到項目,而不是index.html。要做到這一點,只需打開angular-cli-json,並添加CSS文件到styles

"styles": [ 
     "styles.css", 
     "another-styles.css" 
] 
+0

styles.css已經在裏面,它仍然顯示我錯誤! – User1911

+1

確保刪除'index.html'中的css鏈接,並檢查您的路徑是否正確.css文件。 – Haseoh

+0

明白了!謝謝。 – User1911

3

創建目錄src/assets/css,把你的文件fullcalendar.min.csssrc/assets/css

指向它與:

<link rel="stylesheet" type="text/css" href="assets/css/fullcalendar.min.css"> 

角-CLI命令,會複製目錄assets及其內容dist/assets.angular-cli.json指出:

"apps": [{"assets": ["assets"] ...} ...] 

我用以下的目錄結構:

src/assets/css 
src/assets/js 
src/assets/icons 
... 

您可以@Haseoh也提到了.angular-cli.json中的"apps": [{"styles": ["angular2-fullcalendar/fullcalendar.min.css"] ...} ...]

區別在於assets會將css文件原樣複製到dist目錄。 styles將把css文件的內容捆綁到文件styles.bundle.js

0

基本上默認style.css的路徑是在angular-cli.json中指定的,所以你不需要在index.html中調用它,它會自動加載。 「styles」:[「styles.css」,]。如果你有任何其他的css文件,請在這裏指定,並添加路徑爲href =「../path」。