diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2022-01-18 08:34:12 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-01-18 08:34:12 -0500 |
| commit | bcc617f9dc560bd61535c136297e97fb11013d6f (patch) | |
| tree | adbc508939ea66350d08533f3745a146ea455473 /examples | |
| parent | 672b831940dd90687da71225e5ca1d8326d42556 (diff) | |
| download | astro-bcc617f9dc560bd61535c136297e97fb11013d6f.tar.gz astro-bcc617f9dc560bd61535c136297e97fb11013d6f.tar.zst astro-bcc617f9dc560bd61535c136297e97fb11013d6f.zip | |
Update examples to move away from Astro.resolve on styles (#2393)
* Update examples to move away from Astro.resolve on styles
* Prepend the subpath
* Adds a changeset
* Switch to @import for the starter
Diffstat (limited to 'examples')
7 files changed, 25 insertions, 11 deletions
diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro index ffdc0f1c7..81fad3672 100644 --- a/examples/blog-multiple-authors/src/components/MainHead.astro +++ b/examples/blog-multiple-authors/src/components/MainHead.astro @@ -18,7 +18,9 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop <meta name="description" content={description} /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> -<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> +<style global> + @import "../styles/global.css"; +</style> <!-- Sitemap --> <link rel="sitemap" href="/sitemap.xml" /> <!-- RSS --> diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro index 289aa23aa..2902da5a3 100644 --- a/examples/docs/src/components/HeadCommon.astro +++ b/examples/docs/src/components/HeadCommon.astro @@ -8,9 +8,11 @@ <link rel="sitemap" href="/sitemap.xml" /> <!-- Global CSS --> -<link rel="stylesheet" href={Astro.resolve('../styles/theme.css')} /> -<link rel="stylesheet" href={Astro.resolve('../styles/code.css')} /> -<link rel="stylesheet" href={Astro.resolve('../styles/index.css')} /> +<style global> + @import "../styles/theme.css"; + @import "../styles/code.css"; + @import "../styles/index.css"; +</style> <!-- Preload Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com" /> diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index 3864b6430..917f604a2 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -17,7 +17,9 @@ import SvelteCounter from '../components/SvelteCounter.svelte'; <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} /> + <style global> + @import "../styles/global.css"; + </style> </head> <body> <main> diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro index 85c0f6e0d..859ebb205 100644 --- a/examples/starter/src/pages/index.astro +++ b/examples/starter/src/pages/index.astro @@ -20,8 +20,10 @@ let title = 'My Astro Site'; <title>{title}</title> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> - <link rel="stylesheet" href={Astro.resolve('../styles/home.css')}> + <style global> + @import "../styles/global.css"; + @import "../styles/home.css"; + </style> <style> header { diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro index 745f70d86..6b1ba2a52 100644 --- a/examples/with-markdown-plugins/src/layouts/main.astro +++ b/examples/with-markdown-plugins/src/layouts/main.astro @@ -9,7 +9,9 @@ const { content } = Astro.props; <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <title>{content.title}</title> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> + <style global> + @import "../styles/global.css"; + </style> <style> .nav { border-bottom: 1px solid #ccc; diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index b3fdb345e..afbb48512 100644 --- a/examples/with-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro @@ -9,7 +9,9 @@ const { content } = Astro.props; <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <title>{content.title}</title> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> + <style global> + @import "../styles/global.css"; + </style> </head> <body> <slot /> diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro index e25769138..424384933 100644 --- a/examples/with-nanostores/src/pages/index.astro +++ b/examples/with-nanostores/src/pages/index.astro @@ -18,8 +18,10 @@ import AdminsSolid from '../components/AdminsSolid.jsx'; <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> - <link rel="stylesheet" href={Astro.resolve('../styles/home.css')} /> + <style global> + @import "../styles/global.css"; + @import "../styles/home.css"; + </style> <style> header { |