如何在 Astro Layout 中导入我的外部样式或 JS 文件

Question

Does anyone know how I'll be able to import my external CSS and JS files into Astro's new version?有谁知道如何将我的外部 CSS 和 JS 文件导入到 Astro 的新版本中？ 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.但在 Astro 新的 1.0 更新发布后，它不再有效。

Answer 1

Astro.resolve has been deprecated as you can see in detail in the documentation . Astro.resolve已被弃用，您可以在文档中看到详细信息。

Summary of the recommended ESM Import method:推荐的 ESM 导入方法总结：

Place you .css file inside the src/ directory将.css文件放在src/目录中
Import it in your .astro file:将其导入您的.astro文件：

---
// 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. Astro 检测到这些 CSS 导入，然后自动构建、优化并将 CSS 添加到页面。

Answer 2

If you place your style sheet in the public folder, you can simply import it using:如果您将样式表放在public文件夹中，您可以简单地使用以下命令导入它：

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

如何在 Astro Layout 中导入我的外部样式或 JS 文件

问题描述

2 个解决方案

解决方案1
1 2022-10-03 22:59:53

解决方案2
0 2022-08-19 22:09:53

如何在 Astro Layout 中导入我的外部样式或 JS 文件

问题描述

2 个解决方案

解决方案1 1 2022-10-03 22:59:53

解决方案2 0 2022-08-19 22:09:53

解决方案1
1 2022-10-03 22:59:53

解决方案2
0 2022-08-19 22:09:53