Vì vậy, cho phép nói rằng chúng ta có cấu trúc sau đây trong ứng dụng góc của chúng tôi
+-- src
| +-- app
| | +-- customer
| | | +-- customer.scss
| | | +-- customer.module.ts
| | +-- product
| | | +-- product.scss
| | | +-- product.module.ts
| +-- sass
| | +-- _common.scss
| | +-- app.scss
| | +-- project-level-styles.scss
Chúng ta có thể thiết lập dự án tập sass đẳng cấp của mình như sau:
@import 'common';
// project level classes
@import 'project-level-styles';
// module level classes
@import '../app/customer/customer.scss'
@import '../app/customer/product.scss'
Vì vậy, trong những customer.scss và product.scss tôi sẽ có các lớp phổ biến trong nhiều thành phần bên trong mô-đun đó.Cần lưu ý rằng khi bạn tạo một biểu định kiểu không ở cấp thành phần và đặt nó ở một nơi khác như bên trong một thư mục mô-đun hoặc dự án, cách xử lý góc những kiểu đó là khác nhau.
Angular Component Styles
góc có thể bó phong cách thành phần với các thành phần, cho phép một thiết kế mô-đun hơn stylesheets thường xuyên. Các bộ chọn mà bạn đưa vào các kiểu của thành phần chỉ áp dụng trong khuôn mẫu của thành phần đó.
Vì vậy, xin lưu ý rằng bất kỳ biểu định kiểu nào không được liên kết với các thành phần styleUrls mảng có thể được áp dụng cho bất kỳ phần tử nào trong trang web của bạn (nếu bạn không sử dụng tính đặc hiệu). Nó không chỉ áp dụng cho mô-đun đó, vì vậy đây có thể không phải là giải pháp cho mọi tình huống, nhưng đó là điều tôi làm cho các mô-đun của mình, hiểu được điều này tôi có thể viết phong cách của mình trong bảng định kiểu mô đun đó. yếu tố cho mô-đun ...
phần vs toàn cầu
trong ứng dụng của tôi tôi customerModule có một thành phần gốc gọi customerComponent và tôi có một phần tử gốc trong html rằng có một lớp:
customer-container
Vì vậy, bên trong tôi customer.scss tôi có thể thêm vào trước tất cả các phong cách của tôi như thế này:
.customer-container .info-heading {
font-size: 15px; color: #333;
}
.customer-container .section-divider {
margin-top: 1em; border-top: 1px solid #dfdfdf;
}
Vì vậy, tôi bây giờ có thể đạt được một số mức độ đặc hiệu mà giữ phong cách của tôi từ chảy máu vào thành phần dự án khác.
Điều gì sẽ xảy ra nếu tôi muốn biểu định kiểu cấp mô-đun thay vì có biểu định kiểu ở cấp sản phẩm. Vì mỗi mô-đun có bộ chức năng riêng biệt, tôi sẵn sàng có cùng một tập hợp các tính năng thiết kế của toàn bộ mô-đun đó thay vì một thành phần hoặc một dự án. –
Vâng, nếu bạn chắc chắn về việc có nó ở cấp mô-đun và bạn có yêu cầu như thế. Bạn luôn có thể thêm nó. Góc không giới hạn để thêm một ở cấp độ thành phần. –