All geek questions in one place

Index.html does not load local CSS

Recently, I started using AngularCLI. I transferred all my files from Angular2 to the AngularCLI project.

But it does not download the local css file, but does it load other css files?

Current Directory:

-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>
Error

: enter image description here

+5
source share
3 answers

This is not loading, because you need to use the angular-cli.json file to add css files to the project, not index.html . To do this, simply open angular-cli-json and add the css files to the styles :

 "styles": [ "styles.css", "another-styles.css" ]
+8
source

create the src/assets/css directory and put your fullcalendar.min.css file in src/assets/css .

Point to it with

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

angular The -cli build command will copy the assets directory and its contents to dist/assets , as specified in .angular-cli.json :

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

I use the following directory structure:

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

You can also install "apps": [{"styles": ["angular2-fullcalendar/fullcalendar.min.css"] ...} ...] in .angular-cli.json , as pointed out by @Haseoh.

The difference is that assets will copy the css file, as in the dist directory. styles will associate the contents of the css file with the styles.bundle.js file.

+3
source

Basically, the default path for styles.css is in angular-cli.json. Therefore, you do not need to call inside index.html.It will load automatically. "styles": ["styles.css",]. If you have other css files. Indicate it here. And add the path as href = "../path".

0
source

Source: https://habr.com/ru/post/1268128/

More articles:


All Articles