I'm writing a component to wrap around a 3rd party library and want to know the correct way to import a remote css file from a CDN.
#How to add external CDN CSS file to component
past needle
gaunt daggerBOT
Hi @past needle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can add an external CDN CSS file to your Astro component using the <link> element. This should be an absolute URL path to the CSS file. Here's an example:
<head>
<!-- External -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.css"> />
</head>
Please note that this approach uses the public/ directory and skips the normal CSS processing, bundling, and optimizations that are provided by Astro. If you need these transformations, you might want to consider importing the stylesheet from an npm package if it's available.
For more details, you can refer to the Astro documentation on loading static stylesheets via link tags (https://docs.astro.build/en/guides/styling#load-a-static-stylesheet-via-link-tags).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
past needle
@gaunt dagger I notice when I do it this way that there is an extra <head> tag introduced in the page. The link is not hoisted to the actual page header.
gaunt daggerBOT
Let me check the knowledge base for you. One moment! :books:
In Astro, using a <head> tag in a component works like any other HTML tag: it does not get moved to the top of the page or merged with the existing <head>. Because of this, you usually only want to include one <head> tag throughout a page.
Astro recommends writing that single <head> and its contents in a layout component. This way, you can avoid introducing extra <head> tags in your page.
Here's the relevant extract from the Astro documentation (https://docs.astro.build/en/guides/troubleshooting#using-head-in-a-component):
In Astro, using a `<head>` tag works like any other HTML tag: it does not get moved to the top of the page or merged with the existing `<head>`. Because of this, you usually only want to include one `<head>` tag throughout a page. We recommend writing that single `<head>` and its contents in a **layout component** (<https://docs.astro.build/en/core-concepts/layouts/>).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
past needle
@gaunt dagger Then my original question is unanswered. I have a compoent which is a wrapper for a visible page element. I want to include the style sheet in the component to properly display the component. What is the best way to include the CSS in the component? Not in a layout, but in the display component itself?
gaunt daggerBOT
Let me check the knowledge base for you. One moment! :books:
To include a CSS file from a CDN directly in an Astro component, you can use the <link> tag within the component's HTML. However, as you've noticed, this doesn't hoist the link to the actual page header.
Unfortunately, based on the provided extracts, Astro doesn't seem to support a built-in way to hoist <link> tags from components to the page header.
As an alternative, you could consider passing the URL of the CSS file as a prop to a layout component, which could then include it in the page header. Here's a simplified example:
// In your layout component
---
import { Astro } from 'astro';
---
<html>
<head>
<link rel="stylesheet" href={Astro.props.stylesheetUrl} />
</head>
<body>
<slot></slot>
</body>
</html>
// In your component
<Layout stylesheetUrl="<https://cdn.example.com/styles.css">>
<!-- Your component's content here -->
</Layout>
This way, the CSS file is included in the actual page header, and you can specify different stylesheets for different components.