Astro được thiết kế để làm cho việc tạo kiểu và viết CSS trở nên dễ dàng. Viết CSS của riêng bạn trực tiếp bên trong thành phần Astro hoặc nhập thư viện CSS yêu thích của bạn như Tailwind. Các ngôn ngữ tạo kiểu nâng cao như Sass và Ít hơn cũng được hỗ trợ
Tạo kiểu trong Astro
Phần có tiêu đề Tạo kiểu trong AstroTạo kiểu cho thành phần Astro dễ dàng như thêm thẻ
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 vào thành phần hoặc mẫu trang của bạn. Khi bạn đặt thẻ
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 bên trong thành phần Astro, Astro sẽ tự động phát hiện CSS và xử lý các kiểu của bạn cho bạnsrc/thành phần/MyComponent. astro
h1 { color: red; }
Kiểu có phạm vi
Phần có tiêu đề Kiểu phạm viCác quy tắc CSS của Astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 được tự động xác định phạm vi theo mặc định. Các kiểu có phạm vi được biên dịch sau hậu trường để chỉ áp dụng cho HTML được viết bên trong cùng một thành phần đó. CSS mà bạn viết bên trong thành phần Astro sẽ tự động được đóng gói bên trong thành phần đó
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
Các kiểu có phạm vi không bị rò rỉ và sẽ không ảnh hưởng đến phần còn lại của trang web của bạn. Trong Astro, bạn có thể sử dụng các bộ chọn có độ đặc hiệu thấp như
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
5 hoặc
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
6 vì chúng sẽ được biên dịch với các phạm vi trong đầu ra cuối cùngCác kiểu có phạm vi cũng sẽ không áp dụng cho các thành phần Astro khác có trong mẫu của bạn. Nếu bạn cần tạo kiểu cho một thành phần con, hãy xem xét gói thành phần đó trong một
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
7 [hoặc thành phần khác] để sau đó bạn có thể tạo kiểuTính đặc hiệu của các kiểu có phạm vi được giữ nguyên, cho phép chúng hoạt động ổn định cùng với các tệp CSS hoặc thư viện CSS khác trong khi vẫn duy trì các ranh giới độc quyền ngăn các kiểu áp dụng bên ngoài thành phần
phong cách toàn cầu
Phần có tiêu đề Phong cách toàn cầuMặc dù chúng tôi đề xuất các kiểu có phạm vi cho hầu hết các thành phần, nhưng cuối cùng bạn có thể tìm thấy lý do hợp lệ để viết CSS toàn cầu, không có phạm vi. Bạn có thể từ chối phạm vi CSS tự động bằng thuộc tính
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
8src/components/GlobalStyles. astro
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
Bạn cũng có thể kết hợp các quy tắc CSS toàn cầu và phạm vi với nhau trong cùng một thẻ
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 bằng cách sử dụng bộ chọn
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
10. Điều này trở thành một mẫu mạnh mẽ để áp dụng các kiểu CSS cho phần tử con của thành phần của bạnsrc/components/MixedStyles. astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
Đây là một cách tuyệt vời để tạo kiểu cho những thứ như bài đăng trên blog hoặc tài liệu có nội dung do CMS cung cấp trong đó nội dung nằm ngoài Astro. Nhưng hãy cẩn thận. các thành phần có giao diện khác nhau tùy thuộc vào việc chúng có thành phần cha nhất định hay không có thể trở nên khó khắc phục sự cố
Các kiểu có phạm vi nên được sử dụng thường xuyên nhất có thể. Phong cách toàn cầu chỉ nên được sử dụng khi cần thiết
Kết hợp các lớp với
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
11
Phần có tiêu đề Kết hợp các lớp với lớp. danh sách
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
Nếu bạn cần kết hợp động các lớp trên một phần tử, bạn có thể sử dụng thuộc tính tiện ích
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
11 trong tệp
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
13src/components/ClassList. astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
1📚 Xem trang tham khảo chỉ thị của chúng tôi để tìm hiểu thêm về
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
11Biến CSS
Phần có tiêu đề Biến CSSĐã thêm vào. v0. 21. 0Astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 có thể tham chiếu bất kỳ biến CSS nào có sẵn trên trang. Bạn cũng có thể chuyển trực tiếp các biến CSS từ vấn đề phía trước thành phần của mình bằng cách sử dụng chỉ thị
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
16src/components/DefineVars. astro
h1 { color: red; }
0📚 Xem trang tham khảo chỉ thị của chúng tôi để tìm hiểu thêm về
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
16Truyền một
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
18 cho một thành phần con
Phần có tiêu đề Truyền một lớp cho một thành phần con
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
Trong Astro, các thuộc tính HTML như
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
18 không tự động chuyển qua các thành phần conThay vào đó, hãy chấp nhận một giá trị
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
18 trong thành phần con và áp dụng nó cho thành phần gốc. Khi phá hủy, bạn phải đổi tên nó, vì
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
18 là một từ dành riêng trong JavaScriptsrc/thành phần/MyComponent. astro
h1 { color: red; }
6 src/trang/chỉ mục. astro
h1 { color: red; }
7Mẫu này cho phép bạn tạo kiểu trực tiếp cho các thành phần con. Astro sẽ chuyển tên lớp có phạm vi của cha mẹ [e. g.
h1 { color: red; }
02] thông qua chỗ dựa
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
18 một cách tự động, bao gồm đứa trẻ trong phạm vi của cha mẹ nóCác lớp có phạm vi từ các thành phần cha mẹ
Bởi vì prop
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
18 bao gồm phần tử con trong phạm vi của phần tử gốc, nên các kiểu có thể xếp tầng từ phần tử gốc sang phần tử con. Để tránh điều này có tác dụng phụ ngoài ý muốn, hãy đảm bảo bạn sử dụng các tên lớp duy nhất trong thành phần conPhong cách bên ngoài
Phần có tiêu đề Phong cách bên ngoàiCó hai cách để giải quyết các biểu định kiểu chung bên ngoài. nhập ESM cho các tệp nằm trong nguồn dự án của bạn và liên kết URL tuyệt đối cho các tệp trong thư mục
h1 { color: red; }
05 của bạn hoặc được lưu trữ bên ngoài dự án của bạn📚 Đọc thêm về cách sử dụng nội dung tĩnh tại
h1 { color: red; }
05 hoặc
h1 { color: red; }
07Nhập biểu định kiểu cục bộ
Phần có tiêu đề Nhập biểu định kiểu cục bộSử dụng gói npm?
Bạn có thể cần cập nhật
h1 { color: red; }
08 của mình khi nhập từ các gói npm. Xem phần “nhập biểu định kiểu từ gói npm” bên dướiBạn có thể nhập biểu định kiểu trong giao diện thành phần Astro của mình bằng cách sử dụng cú pháp nhập ESM. Quá trình nhập CSS hoạt động giống như bất kỳ hoạt động nhập ESM nào khác trong thành phần Astro. Quá trình nhập này phải được tham chiếu tương ứng với thành phần đó và phải được viết ở đầu tập lệnh thành phần của bạn, cùng với bất kỳ hoạt động nhập nào khác
src/trang/chỉ mục. astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
5CSS
h1 { color: red; }
09 qua ESM được hỗ trợ bên trong bất kỳ tệp JavaScript nào, bao gồm các thành phần JSX như React & Preact. Điều này có thể hữu ích để viết các kiểu chi tiết, theo từng thành phần cho các thành phần React của bạnNhập biểu định kiểu từ gói npm
Phần có tiêu đề Nhập biểu định kiểu từ gói npmBạn cũng có thể cần tải các biểu định kiểu từ gói npm bên ngoài. Điều này đặc biệt phổ biến đối với các tiện ích như Đạo cụ mở. Nếu gói của bạn khuyến nghị sử dụng phần mở rộng tệp [i. e.
h1 { color: red; }
60 thay vì
h1 { color: red; }
61], điều này sẽ hoạt động giống như bất kỳ biểu định kiểu cục bộ nàosrc/pages/trang ngẫu nhiên. astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
9Nếu gói của bạn không đề xuất sử dụng phần mở rộng tệp [i. e.
h1 { color: red; }
61], trước tiên bạn cần cập nhật cấu hình Astro của mìnhGiả sử bạn đang nhập tệp CSS từ
h1 { color: red; }
63 có tên là
h1 { color: red; }
64 [đã bỏ qua phần mở rộng tệp]. Để đảm bảo chúng tôi có thể hiển thị trước trang của bạn một cách chính xác, hãy thêm
h1 { color: red; }
63 vào mảng
h1 { color: red; }
66astro. cấu hình. mjs
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
0Ghi chú
Đây là cài đặt dành riêng cho Vite không liên quan đến [hoặc yêu cầu] Astro SSR
Bây giờ, bạn có thể tự do nhập khẩu
h1 { color: red; }
67. Điều này sẽ được đóng gói và tối ưu hóa bởi Astro giống như bất kỳ biểu định kiểu cục bộ nào khácsrc/pages/trang ngẫu nhiên. astro
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
1Tải biểu định kiểu tĩnh qua thẻ "liên kết"
Phần có tiêu đề Tải biểu định kiểu tĩnh qua thẻ “liên kết”Bạn cũng có thể sử dụng phần tử
h1 { color: red; }
68 để tải biểu định kiểu trên trang. Đây phải là đường dẫn URL tuyệt đối tới tệp CSS nằm trong thư mục
h1 { color: red; }
69 của bạn hoặc URL tới trang web bên ngoài. Giá trị
h1 { color: red; }
68 href tương đối không được hỗ trợsrc/trang/chỉ mục. astro
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
2Vì cách tiếp cận này sử dụng thư mục
h1 { color: red; }
05 nên nó bỏ qua quá trình xử lý, gói và tối ưu hóa CSS thông thường do Astro cung cấp. Nếu bạn cần những chuyển đổi này, hãy sử dụng phương pháp Nhập biểu định kiểu ở trênthứ tự xếp tầng
Phần có tiêu đề Cascading OrderCác thành phần của Astro đôi khi sẽ phải đánh giá nhiều nguồn CSS. Ví dụ: thành phần của bạn có thể nhập biểu định kiểu CSS, bao gồm thẻ
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 của riêng nó và được hiển thị bên trong bố cục nhập CSSKhi các quy tắc CSS xung đột áp dụng cho cùng một phần tử, trước tiên trình duyệt sẽ sử dụng tính đặc hiệu và sau đó là thứ tự xuất hiện để xác định giá trị nào sẽ hiển thị
Nếu một quy tắc cụ thể hơn quy tắc khác, thì bất kể quy tắc CSS xuất hiện ở đâu, giá trị của nó sẽ được ưu tiên
MyComponent. astro
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
3Nếu hai quy tắc có cùng độ đặc hiệu, thì thứ tự xuất hiện sẽ được đánh giá và giá trị của quy tắc cuối cùng sẽ được ưu tiên
MyComponent. astro
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
4Các quy tắc CSS của Astro được đánh giá theo thứ tự xuất hiện này
68 thẻ trong phần đầu [ưu tiên thấp nhất]h1 { color: red; }
- phong cách nhập khẩu
- phong cách phạm vi [ưu tiên cao nhất]
Kiểu có phạm vi
Phần có tiêu đề Kiểu phạm viViệc sử dụng các kiểu có phạm vi không làm tăng tính đặc hiệu của CSS của bạn, nhưng chúng sẽ luôn xuất hiện cuối cùng theo thứ tự xuất hiện. Do đó, chúng sẽ được ưu tiên hơn các kiểu khác có cùng tính đặc hiệu. Ví dụ: nếu bạn nhập biểu định kiểu xung đột với kiểu có phạm vi, thì giá trị của kiểu có phạm vi sẽ được áp dụng
làm cho nó có màu tím. css
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
5 MyComponent. astro
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
6Nếu bạn làm cho kiểu đã nhập cụ thể hơn, thì kiểu đó sẽ có mức độ ưu tiên cao hơn so với kiểu có phạm vi
làm cho nó có màu tím. css
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
7 MyComponent. astro
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
8Đơn đặt hàng nhập khẩu
Phần có tiêu đề Lệnh nhập khẩuKhi nhập nhiều biểu định kiểu trong một thành phần Astro, các quy tắc CSS được đánh giá theo thứ tự chúng được nhập. Độ đặc hiệu cao hơn sẽ luôn xác định kiểu nào sẽ hiển thị, bất kể khi nào CSS được đánh giá. Tuy nhiên, khi các kiểu xung đột có cùng đặc điểm, kiểu được nhập cuối cùng sẽ thắng
làm cho nó có màu tím. css
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
7 làm xanh. css
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
0 MyComponent. astro
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
1Mặc dù các thẻ
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
2 nằm trong phạm vi và chỉ áp dụng cho thành phần khai báo chúng, nhưng CSS đã nhập có thể “rò rỉ”. Việc nhập một thành phần sẽ áp dụng bất kỳ CSS nào mà thành phần đó nhập, ngay cả khi thành phần đó chưa bao giờ được sử dụngPurpleComponent. astro
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
2 MyComponent. astro
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
3Mẹo
Một mẫu phổ biến trong Astro là nhập CSS toàn cầu bên trong thành phần Bố cục. Đảm bảo nhập thành phần Bố cục trước các lần nhập khác để nó có mức độ ưu tiên thấp nhất
Thẻ liên kết
Phần có tiêu đề Thẻ liên kếtCác biểu định kiểu được tải qua thẻ liên kết được đánh giá theo thứ tự, trước bất kỳ kiểu nào khác trong tệp Astro. Do đó, các kiểu này sẽ có mức độ ưu tiên thấp hơn so với biểu định kiểu đã nhập và kiểu có phạm vi
chỉ mục. astro
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
4Tích hợp CSS
Phần có tiêu đề Tích hợp CSSAstro hỗ trợ thêm các thư viện, công cụ và khung CSS phổ biến vào dự án của bạn như Tailwind, v.v.
📚 Xem Hướng dẫn tích hợp để biết hướng dẫn cài đặt, nhập và định cấu hình các tích hợp này
Bộ tiền xử lý CSS
Phần có tiêu đề Bộ tiền xử lý CSSAstro hỗ trợ các bộ tiền xử lý CSS như Sass, Stylus và Less thông qua Vite
Sass và SCSS
Phần có tiêu đề Sass và SCSS
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
5Sử dụng
h1 { color: red; }
75 hoặc
h1 { color: red; }
76 trong tệp
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
13bút cảm ứng
Phần có tiêu đề Bút stylus
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
6Sử dụng
h1 { color: red; }
78 hoặc
h1 { color: red; }
79 trong tệp
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
13Ít hơn
Phần có tiêu đề Ít hơn
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
7Sử dụng
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
51 trong tệp
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
13Trong các thành phần khung
Phần có tiêu đề Trong các thành phần khungBạn cũng có thể sử dụng tất cả các bộ tiền xử lý CSS ở trên trong các khung JS. Đảm bảo tuân theo các mẫu mà mỗi khung đề xuất
- Phản ứng / Dự đoán.
53;/* Scoped to this component, only. */ h1 { color: red; } /* Mixed: Applies to child `h1` elements only. */ article :global[h1] { color: blue; } Title
- Vue.
75h1 { color: red; }
- mảnh dẻ.
75h1 { color: red; }
đăngCSS
Phần có tiêu đề PostCSSAstro đi kèm với PostCSS như một phần của Vite. Để định cấu hình PostCSS cho dự án của bạn, hãy tạo tệp
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
56 trong thư mục gốc của dự án. Bạn có thể nhập plugin bằng cách sử dụng
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
57 sau khi cài đặt chúng [ví dụ:
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
58]postcss. cấu hình. cjs
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
8Khung và Thư viện
Phần có tiêu đề Khung và Thư viện📘 Phản ứng / Dự đoán
Phần có tiêu đề 📘 React / PreactCác tệp
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
59 hỗ trợ cả Mô-đun CSS và CSS toàn cầu. Để bật cái sau, hãy sử dụng tiện ích mở rộng
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
90 [hoặc
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
91/
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
92 nếu sử dụng Sass]src/thành phần/MyReactComponent. jsx
/* Unscoped, delivered as-is to the browser.
Applies to all tags on your site. */
h1 { color: red; }
9📗 Vue
Phần có tiêu đề 📗 VueVue in Astro hỗ trợ các phương thức giống như
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
93- vue-loader - CSS có phạm vi
- vue-loader - Mô-đun CSS
📕 Mảnh dẻ
Phần có tiêu đề 📕 SvelteSvelte trong Astro cũng hoạt động đúng như mong đợi. Svelte Styling Tài liệu
Nâng cao
Phần có tiêu đề Nâng caothận trọng
Hãy cẩn thận khi bỏ qua gói CSS tích hợp của Astro. Các kiểu sẽ không được tự động đưa vào đầu ra được tạo và bạn có trách nhiệm đảm bảo rằng tệp được tham chiếu được đưa đúng vào đầu ra của trang cuối cùng
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
94 Nhập CSS
Phần có tiêu đề ?Nhập CSS thô
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
Đối với các trường hợp sử dụng nâng cao, CSS có thể được đọc trực tiếp từ đĩa mà không cần được đóng gói hoặc tối ưu hóa bởi Astro. Điều này có thể hữu ích khi bạn cần kiểm soát hoàn toàn một số đoạn CSS và cần bỏ qua việc xử lý CSS tự động của Astro
Điều này không được khuyến nghị cho hầu hết người dùng
src/components/RawInlineStyles. astro
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
0Xem tài liệu của Vite để biết chi tiết đầy đủ
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
95 Nhập CSS
Phần có tiêu đề ?url CSS Imports
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
Đối với các trường hợp sử dụng nâng cao, bạn có thể nhập tham chiếu URL trực tiếp cho tệp CSS bên trong thư mục
h1 { color: red; }
07 của dự án. Điều này có thể hữu ích khi bạn cần kiểm soát hoàn toàn cách tệp CSS được tải trên trang. Tuy nhiên, điều này sẽ ngăn việc tối ưu hóa tệp CSS đó với phần CSS còn lại trên trang của bạnĐiều này không được khuyến nghị cho hầu hết người dùng. Thay vào đó, hãy đặt các tệp CSS của bạn bên trong
h1 { color: red; }
05 để có tham chiếu URL nhất quánthận trọng
Nhập một tệp CSS nhỏ hơn với
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global[h1] {
color: blue;
}
Title
95 có thể trả lại nội dung được mã hóa base64 của tệp CSS dưới dạng URL dữ liệu trong bản dựng cuối cùng của bạn. Viết mã của bạn để hỗ trợ URL dữ liệu được mã hóa [______399] hoặc đặt tùy chọn cấu hình
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
00 thành
h1 { color: red; }
h1:where[.astro-HHNQFKH6] { color: red; }
.text { color: blue; }
.text:where[.astro-HHNQFKH6] { color: blue; }
01 để tắt tính năng này