Astro实现零JS开销CSS的两种方式：一是.astro文件内联<style>标签，样式静态注入HTML且作用域隔离；二是import纯CSS文件（无@tailwind等构建指令），确保不触发插件处理。
直接在.astro文件中用<style></style>写内联样式
这是最彻底的“零JS开销”方式：样式不走任何构建流程、不触发任何CSS处理插件、不生成独立.css文件，完全静态注入到HTML中。Astro默认会把<style></style>块内容提取为<style>标签并内联进<head>，全程不依赖JavaScript解析或运行。
适用场景：组件级局部样式（比如一个Card.astro的边框、间距、颜色），且不需要复用、不涉及媒体查询嵌套过深。
- 写法示例：
<style> .card { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; } </style> - 注意
scoped不是必需的——Astro默认就作用域隔离，类名不会泄露到全局 - 不要在里面写
@import或url()引用外部资源，否则会触发额外请求或构建时解析逻辑
在src/styles/下放纯CSS文件并用import语句引入
Astro支持直接import CSS文件，只要它不带任何框架特性（比如Sass变量、PostCSS插件语法），就能被当作纯静态资源处理，最终合并进styles.css输出，不产生JS bundle。
关键点在于：**必须确保该CSS文件本身不含@layer、@theme、@tailwind等需要构建时介入的指令；也不要用import链式引入其他CSS（如A.css → import B.css），否则Astro可能将其识别为模块化依赖而启用额外处理。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：
// src/styles/global.css body { margin: 0; font-family: system-ui; } a { color: #3b82f6; text-decoration: none; }// 在src/pages/index.astro顶部 import '../styles/global.css';
- 错误做法：在
global.css里写@tailwind base;——这会让Astro调用Tailwind插件，不再是“零JS” - 如果用了
@astrojs/tailwind插件，哪怕只import一个CSS文件，整个Tailwind引擎也会启动，JS开销就回来了
避免误触Astro的CSS处理链路
看似只是加一行import，但实际可能悄悄引入JS依赖。Astro对CSS的“零开销”有严格前提：文件必须是plain CSS，且导入路径不能触发任何集成插件的监听规则。
常见踩坑点：
- 把CSS文件放在
src/components/下并命名为Button.css，然后在Button.astro里import './Button.css'——某些插件（如@astrojs/react）会扫描组件目录下的同名CSS，尝试做CSS-in-JS绑定 - 使用
import语句指向一个软链接（symlink）路径，Astro可能无法正确判定其来源，转而启用通用CSS loader，附带轻量JS runtime - 在
astro.config.mjs中启用了@astrojs/mdx或@astrojs/sitemap等插件后，它们内部的CSS收集逻辑可能被意外激活，即使你没在MDX里写样式
验证是否真零JS：构建后检查dist/_astro/目录下有没有.js文件；再打开dist/index.html，搜索<script，确认没有加载任何.js资源（除了你显式写的<script type="module">）。
图片、字体等资源引用必须走src/路径而非public/
很多人以为把CSS放进public/就能绕过构建——不行。Astro要求所有被import的资源必须在src/下，否则无法解析相对路径，url(./fonts/inter.woff2)这类引用会失效，浏览器报404。而一旦你把字体、图标等塞进src/并被CSS引用，Astro就会自动拷贝到dist/对应位置，全程不经过JS处理。
- 正确结构：
src/ ├── styles/ │ └── global.css ← import '../styles/global.css' └── assets/ └── fonts/ └── inter.woff2 ← global.css里写 url('../assets/fonts/inter.woff2') - 错误结构：把
inter.woff2放在public/fonts/，然后在CSS里写url('/fonts/inter.woff2')——虽然能跑，但失去Astro的路径校验和自动哈希能力，CDN缓存更新容易出错
真正零JS的CSS链路，本质是放弃一切“动态能力”：不条件加载、不主题切换、不运行时注入。它就是一份确定的字节流，从src到dist，中间不经过任何JS解释器。这点容易被忽略，但恰恰是Astro性能优势的底层锚点。
