Kiểu css không hoạt động góc cạnh
Hướng dẫn này giải thích quy trình sử dụng các kiểu tùy chỉnh được tạo bởi Trình chỉnh sửa chủ đề trong ứng dụng Angular sử dụng các thành phần Essential JS2 Angular Show
Tạo một ứng dụng gócLàm theo tài liệu để tạo một ứng dụng Angular bao gồm các thành phần Essential JS2 Angular Tạo tệp CSS tùy chỉnhSử dụng theme-studio để tạo tệp CSS tùy chỉnh Thêm CSS tùy chỉnh trong ứng dụng AngularĐặt tệp CSS tùy chỉnh đã tạo bên trong thư mục Ánh xạ kiểu tùy chỉnhTrong tệp
Chạy ứng dụng gócKhởi động ứng dụng Angular và các thành phần Essential JS2 Angular sẽ hiển thị với các kiểu tùy chỉnh 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 dòng, được nhập trong 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 Mở 1 2 3 4 5
<p> điều này para là đến từ test component < / p>
Bây giờ hãy mở 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ầuSử dụng góc-CLINế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 vào
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 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 Mở 1 2 3
p { màu . xanh dương}
Khi bạn thêm các tệp CSS bằng cách sử dụng tệp cấu hình Thêm nhiều biểu định kiểuTạo một 1 2 3
p { màu . đỏ}
Tiếp theo, thêm tệp CSS vào 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àiCó 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ụ để bao gồm bootstrap 4, bạn có thể sao chép phiên bản mới nhất từ liên kết 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 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ểuBạ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ở 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ếpNế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 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 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ượcChú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 Tại sao kiểu CSS của tôi không hoạt động?Đảm bảo thẻ liên kết ở đúng vị trí
. Kiểu bên ngoài CÓ THỂ được đặt bên trong thẻ
Làm cách nào để thêm kiểu CSS trong Angular?Cách sử dụng tệp CSS tùy chỉnh trong ứng dụng góc . Tạo một ứng dụng góc. Tạo một ứng dụng góc với các Thành phần góc Essential JS 2 bằng tài liệu Tạo tệp CSS tùy chỉnh. . Thêm CSS tùy chỉnh trong ứng dụng góc. . Ánh xạ kiểu tùy chỉnh. . Chạy ứng dụng góc Tại sao CSS của tôi không được áp dụng mã VS?Vấn đề có thể là do trình duyệt của bạn đang lưu tệp CSS vào bộ đệm ẩn . Nếu bạn đang gỡ lỗi bằng Edge, bạn có thể mở công cụ F12 và nhấp vào tab Mạng. Ở trên cùng, bạn sẽ tìm thấy nút "luôn làm mới từ máy chủ. " Hãy bật tính năng này và các tệp sẽ không được lưu vào bộ nhớ cache.
Tại sao CSS của tôi không ảnh hưởng đến HTML của tôi?Nếu bạn đang thêm/sửa đổi CSS hoặc JavaScript nội tuyến và không thấy các thay đổi được phản ánh trong nguồn HTML, có thể trang đang được lưu vào bộ nhớ cache. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders. |