Astro 1.0更新后如何在布局中导入外部CSS/JS文件？

导入CSS文件 #

方法1：ES模块导入（推荐） #

直接在组件或页面的Frontmatter中导入CSS文件，Astro会自动处理打包、压缩等优化：

---
// 假设style.css在项目根目录的styles文件夹下
import '../styles/style.css';
---
<!-- 页面/组件内容 -->

方法2：使用<link>标签（需放public目录） #

如果需要用传统的link标签引入，先把CSS文件放到项目根目录的public文件夹下（比如public/styles/style.css），然后直接写绝对路径：

<link rel="stylesheet" href="/styles/style.css">

导入JS文件 #

方法1：ES模块导入（推荐） #

同样在Frontmatter中导入JS文件，Astro会将其打包到最终产物中：

---
import '../scripts/script.js';
---

方法2：使用<script>标签（客户端执行） #

如果是需要在客户端运行的脚本，可直接用script标签引入，同样建议将文件放在public目录下：

<!-- 基础引入 -->
<script src="/scripts/script.js"></script>

<!-- 带客户端执行指令（按需选择） -->
<script src="/scripts/script.js" client:load></script>

常用的客户端指令说明：

• client:load：页面加载时立即执行脚本
• client:visible：当脚本所在元素进入视口时执行
• client:idle：浏览器空闲时执行脚本

旧方法失效原因 #

Astro 1.0之后，Astro.resolve()主要用于组件内部的资源引用（比如图片、字体），不再支持在<link>或<script>标签的href/src属性中直接使用，官方推荐使用ES模块导入或public目录静态资源的方式。

内容的提问来源于stack exchange，提问作者SukhOP