pnpm add modern-normalize.
So far so good. I want normalize's stylesheet to be the first stylesheet in the generated HTML, but for some reason the Welcome component's stylesheet appears first. I tried a two different methods and none have worked so far.
Attempt 1
---
import "modern-normalize/modern-normalize.css";
---
<!-- Layout.astro -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<slot />
</body>
</html>
I inspected the generated index.html file under dist/, and modern-normalize.css appears after the Welcome component's styles.
Attempt 2
<!-- Layout.astro -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style>
@import "modern-normalize/modern-normalize.css";
</style>
</head>
<body>
<slot />
</body>
</html>
In the generated index.B2quw3j1.css file, normalize, once again, appears after the Welcome component's CSS.
I know that the Welcome component's CSS is scoped to it, but is there a way to make modern-normalize.css appear before the rest of CSS?