stackoom
  简体   繁体   中英

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

 原文  2022-08-19 20:57:37  8   2    javascript/ css/ import/ frameworks/ astrojs

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.

2 answers

solution1
 1  2022-10-03 22:59:53

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.

solution2
 0  2022-08-19 22:09:53

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

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question For Astro.js, how do I inject page content (seo meta tags) into <head> section of an Astro layout? How to render .astro files in django How to import external JS-script to FXML layout? How to import or use external JS files and functions in my angular web application How to import external JS files into another JS file? How to import modules or external .js files in node.js how to add external style sheet and js files to jsfiddle I want to import bootstrap js and jquery js file in astro js how to import external js and css on my code nuxtjs How to use document and window element in astro JS?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM