Hướng dẫn add css file to angular project - thêm tệp css vào dự án góc cạnh

15 tháng 11 năm 2022 /1 phút để đọc

Phần này giải thích về cách sử dụng các kiểu tùy chỉnh được tạo bởi trình chỉnh sửa chủ đề cho các thành phần góc JS2 thiết yếu.

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 cần thiết bằng cách sử dụng tài liệu.

Tạo tệp CSS tùy chỉnh

Tạo tệp CSS tùy chỉnh bằng cách sử dụng chủ đề-studio.

Thêm CSS tùy chỉnh trong ứng dụng góc

Thêm tệp CSS tùy chỉnh được tạo trong ứng dụng góc đã tạo của bạn bên trong ./src/.

Bản đồ phong cách tùy chỉnh

Thêm đường dẫn tệp CSS tùy chỉnh trong tệp ./angular.json trong thuộc tính architect/build/options/styles như bên dưới

"styles": [
             "src/styles.css",
             "src/custom-material.css"
          ],

Chạy ứng dụng góc

Sau đó chạy ứng dụng góc của bạn và bạn sẽ nhận được các thành phần góc cạnh JS 2 thiết yếu với các kiểu tùy chỉnh.

Cách sử dụng Angular với các bảng kiểu xếp tầng liên kết (CSS)

Luôn luôn sử dụng các CSS được liên kết thay vì phiên bản bộ nhớ JavaScript được biên dịch và nhúng của CSS Google Angular sử dụng. Tại sao? Liên kết CSS bên ngoài vượt trội theo mọi cách để nhúng CSS, chủ yếu là do CSS được liên kết được lưu trong bộ nhớ cach Quản lý CSS, tổng thể.superior in every way to embedded CSS, mainly because linked CSS is cached across thousands of page views, visits, and users online, saving you huge bandwidth values with increased CSS rendering speed in the browser, while implementing simpler, faster CSS management, overall.

Cách sửa chữa góc cho CSS được liên kết

1. Trong Angular.json xóa tất cả các tham chiếu đến các tệp CSS trong "Kiểu". Nó sẽ trông như thế này bây giờ:angular.json delete all the references to CSS files under "styles". It should look like this now:

     "styles": [],
   

2. Di chuyển các tệp CSS của bạn vào thư mục "SRC" bên trong dự án của bạn, sau đó thêm các liên kết vào các tệp CSS bên ngoài của bạn bên trong index.html. Thêm vào các đường dẫn liên kết của bạn vào tệp CSS của bạn bắt đầu tại thư mục "SRC" và bao gồm thư mục "Styles" hoặc bất kỳ hệ thống thư mục nào bạn mong muốn (xem bên dưới). Bạn có thể lưu trữ CSS của mình bất cứ nơi nào bạn muốn trong dự án của mình miễn là các thư mục tệp đó nằm trong thư mục gốc "SRC" của bạn. Các tệp CSS vật lý của tôi trong dự án của tôi cho đường dẫn bên dưới hiện đang nằm dưới "SRC/Styles". Vì vậy, đường dẫn liên kết chỉ là thư mục "Kiểu" của tôi cộng với tên tệp:. Add in your link paths to your CSS file starting at the "src" folder and including the "styles" folder or any folder system you desire (see below). You can store your css wherever you want in your project now as long as those folders of files are under your "src" root folder. My physical CSS files in my project for the path below now sit under "src/styles". So the link path should just be my "styles" folder plus the file name:

1. Bất kỳ tệp CSS nào cho bootstrap, font-beating, v.v. mà bạn muốn trong dự án của mình phải được sao chép thủ công từ thư mục "node_modules" trong dự án của bạn vào thư mục trong thư mục "SRC" của bạn, giống như ở vị trí được sử dụng cho Tệp CSS ở trên trong #2. Hoặc, bạn có thể tham khảo chúng từ một số URL đủ điều kiện trực tuyến. Nếu bạn muốn tạo một liên kết đến chúng như trên trong "index.html" hoặc nhập trực tiếp vào tệp HTML (ví dụ bên dưới), điều đó cũng sẽ hoạt động. Nếu bạn đã nhập chúng trước đây từ thư mục "node_modules" sẽ không hoạt động như CLI hoặc webpack góc đã giải quyết các đường dẫn đó bằng cách biên dịch CSS của bạn nhập vào JavaScript. Sau khi bạn di chuyển các tệp CSS và liên kết hoặc nhập chúng từ thư mục SRC, chúng sẽ không được biên dịch thành JavaScript Angular ngay bây giờ. Khi sử dụng

     "styles": [],
   

   0, hãy chắc chắn bỏ các tệp CSS bootstrap và phông chữ của bạn trong cùng một thư mục "SRC/Styles" dưới dạng bảng kiểu chính của bạn và nhập chúng vào kiểu đó như thế này:bootstrap, font-awesome, etc. that you want in your project have to be manually copied from your "node_modules" folder in your project into a folder under your "src" folder, just like in the location used for the CSS file above in #2. Or, you can reference them from some fully qualified url online. If you want to create a link to them as above in "index.html", or import them into the html file directly (example below), that will also work. If you were importing them before from the "node_modules" folder that will not work as the Angular CLI or webpack resolved those paths by compiling your CSS imports into JavaScript. After you move those CSS files and link or import them from the src folder, they will not be compiled into Angular JavaScript now. When using

     "styles": [],
   

   0, be sure to drop your bootstrap and font-awesome CSS files in the same "src/styles" folder as your main style sheet and import them into that stylesheet like this:

1. Trong cùng một tệp Angular.json ở trên, trong cài đặt JSON "Tài sản", hãy thêm tham chiếu đến vị trí của các tệp CSS của bạn trong #2 và #3 để trình xây dựng có thể sao chép chúng vào thư mục Dist của bạn. Bất kỳ tệp CSS nào được liên kết hoặc nhập từ thư mục đó sẽ được di chuyển bởi hệ thống thư mục "dist" khi Angular được biên dịch. Lưu ý đường dẫn kiểu mới ở phía dưới. Nếu bạn có CSS ​​trong các thư mục khác, bạn cũng có thể thêm chúng ở đây. Điều này cho người xây dựng tạo các thư mục CSS trong thư mục "Dist" sử dụng và sao chép tất cả các tệp CSS bên trong chúng, vì vậy khi bạn xây dựng để sản xuất các liên kết index.html của bạn trỏ đến các tệp CSS bên phải trên máy chủ:angular.json file above, under the "assets" JSON setting, add a reference to the location of your CSS files in #2 and #3 so the builder can copy them into your dist folder. Any CSS files linked or imported from that folder will get moved by the "dist" folder system when Angular is compiled. Note the new styles path at the bottom. If you have CSS in other folders you can add them here as well. This tells the builder to create the CSS directories in the "dist" folder Angular uses and copy all the CSS files inside them, so when you build for production your index.html links point to the right CSS files on the server:

    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/api",
      "src/styles"
    ],
   

Bây giờ bạn có một tập hợp các phần tử liên kết mạnh mẽ cho tất cả các CS của bạn trong đầu tệp index.html của bạn và có thể chỉnh sửa chúng trong dự án Angular như bạn thường làm, biết rằng chúng sẽ hoạt động trong cả máy chủ kiểm tra phát triển góc và trong Dist của bạn Bản sao sản xuất. Trang web của bạn cũng sẽ được hưởng lợi từ bộ nhớ đệm của CSS một lần trong bộ nhớ và bộ nhớ cache tệp vĩnh viễn.

Tôi phải mất một ngày để đào thông qua tài liệu và thử nghiệm để tìm ra những gì đáng lẽ phải là một phần tự nhiên của bất kỳ API trang web đơn giản nào với CSS được liên kết. Tôi xin lỗi Google Angular đã làm điều này rất phức tạp. Nhưng sự thay đổi này hoạt động tuyệt vời!should have been a natural part of any simple website API with linked CSS. I'm sorry Google Angular made this so convoluted. But this change works great!

Điều này chỉ đơn giản là loại bỏ CSS của bạn khỏi hệ thống tổng hợp và xây dựng hệ thống góc để đẩy tất cả các CSS của bạn vào tệp JavaScript, chỉ đơn giản là nhúng CSS của bạn vào một khối bảng kiểu nội tuyến trong bộ nhớ của trình duyệt và đầu trang HTML của bạn. Sử dụng các thẻ CSS HTML được liên kết của riêng bạn vượt trội hơn nhiều và cho phép lưu trữ và kiểm soát tốt hơn các quy tắc CSS Cascade.

Chúc may mắn!

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

Tôi có thể sử dụng CSS và SCSS trong góc không?

Làm thế nào chúng ta có thể sử dụng các tệp CSS phổ biến cho nhiều thành phần trong Angular?

Tệp SCSS trong Angular là gì?