CODEWITHSUNDEEP
javascriptcssimportframeworksastrojs
SukhOP
SukhOP

Reputation: 1

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

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.

Upvotes: 0

Views: 6298

Answers (2)

Luca Pavan
Luca Pavan

Reputation: 21

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

Summary of the recommended ESM Import method:

  1. Place you .css file inside the src/ directory
  2. Import it in your .astro file:
---
// Example: Astro will include and optimize this CSS for you automatically
import './style.css';
---
<html><!-- Your page here --></html>
  1. Astro detects these CSS imports and then builds, optimizes, and adds the CSS to the page automatically.

Upvotes: 2

Hasan Ali
Hasan Ali

Reputation: 204

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

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

Upvotes: 0

Related Questions