This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
You can use @import to load entire style sheets into a cascade layer.
@import url("path/to/the/styles.css") layer(layername);For example, you could load something like Bootstrap into a dedicated third-party layer.
@layer third-party, base, components, utility;
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);
@layer base {
body {
/* my custom styles */
}
}<button type="button" class="btn btn-primary">Primary</button>An important thing to know when importing styles is that it matters where you put the @import rule. In the spec it says:
Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and empty @layer definitions) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid.
This is invalid:
@layer third-party, base, components, utility;
@layer base {
body {
/* my custom styles */
}
}
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-12-01T00:00:00+00:00) Day 49: layering entire style sheets. Retrieved from https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.