How to import my external Style or JS files in Astro Layout

Question

Does anyone know how I'll be able to import my external CSS and JS files into Astro's new version? I tried:

<link rel="stylesheet" href={Astro.resolve('../styles/style.css')}>

But it's not workings anymore after Astro's new 1.0 Update launch.

Do you need to load the script from a CDN? – Nick McCurdy Sep 04 '22 at 12:48 — Nick McCurdy, Sep 04 '22 at 12:48

score 1 · Answer 1 · answered Oct 03 '22 at 22:59

Astro.resolve has been deprecated as you can see in detail in the documentation.

Summary of the recommended ESM Import method:

---
// Example: Astro will include and optimize this CSS for you automatically
import './style.css';
---
<html><!-- Your page here --></html>

Astro detects these CSS imports and then builds, optimizes, and adds the CSS to the page automatically.

score 0 · Answer 2 · answered Aug 19 '22 at 22:09

0

If you place your style sheet in the public folder, you can simply import it using:

<link rel="stylesheet" href="index.css" />

answered Aug 19 '22 at 22:09

Hasan Ali

Minor correction: for public folder put /index.css However I am looking how to use Javascript which is kept in public folder as I am getting the following message: Please add the "is:inline" directive to keep this asset from being bundled. – Vijay Bhatter Sep 02 '22 at 10:58

2 Answers2