Chúng ta có thể sử dụng css trong góc không?

Có một số cách để thêm kiểu Toàn cầu (Kiểu rộng ứng dụng) vào ứng dụng Góc. Các kiểu có thể được thêm nội tuyến, được nhập vào index.html hoặc được thêm qua angular-cli.json. Góc cho phép chúng tôi thêm các kiểu cụ thể của thành phần trong các thành phần riêng lẻ, kiểu này sẽ ghi đè lên các kiểu chung. Trong bài viết này, chúng ta sẽ tìm hiểu cách thêm các kiểu CSS toàn cầu vào các ứng dụng góc cạnh. Chúng ta cũng sẽ tìm hiểu cách thêm các tệp CSS tùy chỉnh và biểu định kiểu bên ngoài vào ứng dụng góc cạnh

Mục lục

Ứng dụng ví dụ

Đầu tiên, tạo một ứng dụng mẫu bằng lệnh sau

1

2

3

ng mới GlobalStyle

Hãy để chúng tôi thêm thành phần mới

1

2

3

ng g c kiểm tra

Lệnh trên sẽ tạo TestComponent trong thư mục test và thêm nó vào thư mục AppModule. Bạn có thể tìm hiểu thêm các Lệnh CLI góc như vậy từ Hướng dẫn CLI góc

Mở test.component.html và thêm mã HTML sau

1

2

3

4

5

<p>

  điều này para là đến từ test component

< / p>

Bây giờ hãy mở app.component.html thêm sao chép HTML sau

1

2

3

4

5

6

7

8

9

<h1>

  Chào mừng đến với {{ title }}!

< / h1>

<p>Đây para is from app component</p>

<ứng dụng - thử nghiệm></app-test>

ứng dụng. thành phần. ts

1

2

3

4

5

6

7

8

9

10

11

12

13

nhập { Thành phần } từ '@angular/core';

@Thành phần({

  bộ chọn. 'root ứng dụng',

  Url mẫu. '. /ứng dụng. thành phần. html',

  styleUrl. ['. /ứng dụng. thành phần. css']

})

xuất lớp AppComponent {

  title = 'Phong cách toàn cầu góc cạnh';<

}

Chạy ứng dụng và bạn sẽ thấy như sau

Bây giờ chúng ta hãy thêm các Kiểu CSS toàn cầu vào ứng dụng ví dụ trên

Thêm kiểu CSS toàn cầu

Sử dụng góc-CLI

Nếu bạn đã tạo Ứng dụng góc bằng CLI góc, thì bạn có thể thêm các tệp CSS tùy chỉnh trong angular.json dưới mảng styles

angular.json được gọi là angular-cli.json ở góc 5 trở xuống

Bạn sẽ tìm thấy nó trong nút dự án-> GlobalStyle -> kiến ​​trúc sư -> xây dựng -> tùy chọn -> kiểu

Theo mặc định, góc thêm angular-cli.json1 trong thư mục angular-cli.json2

1

2

3

4

5

6

            ],

            "kiểu". [

              "src/styles. css"

            ],

Tham chiếu đến tệp CSS có liên quan đến nơi lưu trữ tệp angular.json. đó là thư mục gốc của dự án

Mở angular-cli.json1 và thêm quy tắc CSS sau

1

2

3

p { màu . xanh dương}

Những cuốn sách về góc hay nhất
Top 8 cuốn sách về góc hay nhất giúp bạn bắt đầu với Angular  

Khi bạn thêm các tệp CSS bằng cách sử dụng tệp cấu hình angular.json, các quy tắc CSS sẽ được nhóm vào phần angular-cli.json6 và được thêm vào phần angular-cli.json7

Thêm nhiều biểu định kiểu

Tạo một angular-cli.json8 trong thư mục angular-cli.json9 và thêm kiểu CSS sau

1

2

3

p { màu . đỏ}

Tiếp theo, thêm tệp CSS vào angular.json như hình bên dưới

1

2

3

4

5

6

"kiểu". [

  "src/styles. css",

  "src/assets/css/morestyles. css"

],

Thứ tự của các biểu định kiểu rất quan trọng vì biểu định kiểu cuối cùng sẽ ghi đè các quy tắc CSS đã thêm trước đó

Thêm biểu định kiểu bên ngoài

Có ba cách để bạn thêm các biểu định kiểu bên ngoài

Sao chép chúng cục bộ

Ví dụ để thêm bootstrap 4 bạn có thể copy bản mới nhất từ ​​link TestComponent1 và copy vào thư mục TestComponent2

1

2

3

4

5

6

7

"kiểu". [

  "src/styles. css",

  "src/assets/css/morestyles. css",

  "src/assets/css/bootstrap. tối thiểu. css"

],

Tùy chọn khác là cài đặt gói npm do thư viện bên thứ ba cung cấp. Các tệp CSS được sao chép trong thư mục node_modules. Ví dụ để cài đặt bootstrap chạy lệnh npm sau

1

2

3

npm cài đặt bootstrap

Và sau đó thêm nó vào angular.json như hình bên dưới

1

2

3

4

5

6

7

"kiểu". [

  "src/styles. css",

  "src/assets/css/morestyles. css",

  "node_modules/bootstrap/dist/css/bootstrap. tối thiểu. css"

],

Nhập nó vào một trong các biểu định kiểu

Bạn có thể nhập chúng trực tiếp vào một trong các biểu định kiểu. Ví dụ: mở angular-cli.json1 và thêm câu lệnh nhập sau vào đầu

1

2

3

@nhập "https. // ngăn xếp. bootstrapcdn. com/bootstrap/4. 2. 1/css/khởi động. tối thiểu. css";

Thêm kiểu trực tiếp

Nếu bạn không sử dụng angular-cli, thì bạn có thể sử dụng trường học cũ và liên kết nó trực tiếp trong tệp index.html như hình bên dưới. Bạn có thể sử dụng điều này ngay cả khi bạn đang sử dụng angular-cli

1

2

3

<liên kết rel = "biểu định kiểu" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

Sau đây bao gồm các tệp CSS cục bộ

1

2

3

<liên kết rel = "biểu định kiểu" href="assets/css/morestyles.css">

Đường dẫn phải có tham chiếu đến index.html

Các biểu định kiểu này không được bao gồm trong gói, nhưng được tải riêng không giống như khi bạn đang sử dụng angular-cli

Tóm lược

Chúng tôi đã học cách xác định và tải biểu định kiểu chung trong các ứng dụng góc cạnh. Trong bài viết tiếp theo, chúng tôi sẽ hướng dẫn bạn cách thêm style cho các thành phần góc cạnh

Làm cách nào để kết nối CSS trong Angular?

Làm cách nào để áp dụng CSS trong thành phần Góc?