URL Protocol
URL Protocol lets you use a url: protocol to link to local files in Astro.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>URL Protocol: Inline Example</title>
<link rel="stylesheet" href={await import('url:style.css')} />
</head>
<body>
<h1>URL Protocol: Inline Example</h1>
</body>
</html>---
import styleURL from 'url:style.css'
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>URL Protocol: Frontmatter Example</title>
<link rel="stylesheet" href={await styleURL} />
</head>
<body>
<h1>URL Protocol: Frontmatter Example</h1>
</body>
</html>Usage
Install URL Protocol to your project.
npm install @astropub/url-protocolAdd URL Protocol to the renderers list.
// astro.config.js
export default {
renderers: [
'@astropub/url-protocol'
]
}You can also add URL Protocol as a Vite Plugin.
// astro.config.js
import { urlProtocolPlugin } from '@astropub/url-protocol'
export default {
vite: {
plugins: [
urlProtocolPlugin()
]
}
}