Làm cách nào để thay đổi biểu định kiểu trong góc?

Angular CLI là một phần cực kỳ mạnh mẽ của khung JavaScript Angular. Bằng cách hiển thị một API đơn giản và mạnh mẽ trước hệ thống xây dựng của nó, Angular CLI cung cấp cho bạn khả năng kết hợp các biểu định kiểu CSS với ứng dụng của bạn một cách nhanh chóng và dễ dàng. Trong hướng dẫn này, bạn sẽ tìm hiểu cách chọn bộ tiền xử lý CSS khi tạo ứng dụng mới và cách tận dụng API nói trên

Hãy đi sâu vào

Tùy chọn Chọn Bộ tiền xử lý CSS

Có thể tải xuống Angular CLI trên máy của bạn bằng cách chạy lệnh sau bằng NPM

1npm install -g @angular/cli

đánh đập

Bây giờ, bạn có thể sử dụng lệnh ______6_______ để truy cập CLI. Để xem danh sách đầy đủ các lệnh có sẵn, hãy chạy ______7_______ .

Đầu tiên, bạn sẽ cần tạo một ứng dụng Angular mới để thử nghiệm với. Bootstrapping một ứng dụng Angular thông qua CLI cũng đơn giản như chạy

1ng new testing-css

đánh đập

Lệnh này sẽ tạo một ứng dụng Angular mới trong thư mục hiện tại của bạn có tên là testing-css . Trong quá trình tạo ứng dụng Angular mới của bạn, bạn sẽ được nhắc về bộ tiền xử lý CSS nào (nếu có) mà bạn muốn sử dụng. tùy chọn của bạn bao gồm.

• CSS
• SCSS
• ngổ ngáo
• Ít hơn
• bút cảm ứng

Lựa chọn này đặt trạng thái ban đầu của ứng dụng Angular của bạn liên quan đến định dạng biểu định kiểu. Bạn luôn có thể thay đổi trạng thái này bằng cách chỉnh sửa tệp ____9_______ của dự án. Ví dụ: để đảm bảo rằng các thành phần mới được tạo bằng tệp ____10_______ , bạn có thể thêm hoặc thay đổi phần này của tệp angular.json:

1"schematics": {
2    "@schematics/angular:component": {
3        "style": "scss"
4    }
5}

json

Bao gồm các biểu định kiểu bên ngoài

Khả năng trên là tốt nhưng nếu bạn cần đưa các biểu định kiểu bên ngoài vào bản dựng sản xuất của mình một cách rõ ràng và an toàn thì sao? . Bằng cách định cấu hình tệp ______9_______ một cách thích hợp, bạn có thể yêu cầu Angular xây dựng bất kỳ số lượng biểu định kiểu nào vào ứng dụng của mình. Một ví dụ phổ biến là đưa vào Twitter Bootstrap. Bên dưới, bạn có thể xem ví dụ về tệp ____9_______ được đặt để bao gồm Bootstrap.

1"projects": {
2    "testing-css": {
3      ....
4      "architect": {
5        "build": {
6          "builder": "@angular-devkit/build-angular:browser",
7          "options": {
8            ....
9            "styles": [
10              "./node_modules/bootstrap/dist/css/bootstrap.css",
11              "src/styles.css"              
12            ]
13      ....

json

Bằng cách thay đổi trường mảng ____1_______3 trong dự án của bạn angular.json file, you can easily configure which CSS files you want to include in your project. If the stylesheet you want to include happens to be an SCSS file (or another CSS preprocessor), instead of altering the angular.json , hãy đảm bảo chỉ cần nhập . Ví dụ: nếu ứng dụng của bạn sử dụng SCSS, quá trình nhập của bạn sẽ như thế này.

1@import "~bootstrap/scss/bootstrap.scss";

css

Điều này sẽ có tác dụng tương tự như phương pháp trên đối với bản dựng của bạn

Phần kết luận

Trong hướng dẫn này, bạn đã học cách tạo kiểu bằng CLI góc. Cụ thể, bạn đã thấy cách bạn có thể đặt định dạng biểu định kiểu ban đầu, khi tạo ứng dụng và bằng cách thay đổi trực tiếp tệp angular.json . Cuối cùng, bạn đã học cách đưa các biểu định kiểu bên ngoài vào bản dựng của mình thông qua cách cấu hình thêm angular.json .

Và đó là nó. Bây giờ bạn có thể tự tin khi xây dựng và đóng gói các biểu định kiểu thông qua Angular CLI và hệ thống xây dựng đi kèm của nó. Để biết thêm thông tin, xin vui lòng kiểm tra này

Làm cách nào để đặt CSS trong Góc?

Làm cách nào để thay đổi kiểu từ CSS sang SCSS trong Angular?

Tôi nên sử dụng định dạng biểu định kiểu nào cho góc cạnh?

Làm cách nào để ghi đè biểu định kiểu được xây dựng trong Angular?