我有一个 'src/styles/main.css' 文件，里面包含了所有全局样式。我把它导入到MainLayout.astro文件中。这个主css文件会与页面特定的css文件一起打包，从而造成重复。所以 'aboutPage.css' 和 'productsPage.css' 都会包含main.css的样式。

我想要一个独立的main.css，在所有页面中都被链接，并配合一个页面特定的CSS文件。例如，关于页面将链接两个CSS文件，'main.css' 和 'about.css'。

这样在第一张页面加载完成后，后续页面的加载就会有更小的CSS包，因为main.css会被本地缓存。

在Astro中是否仍然可以实现这一点，同时还能保留main.css的 HMR（热模块替换）优势？

解决方案

Astro已经具备CSS分块功能：页面CSS按路由拆分，公共CSS会被提取以实现复用。

看起来像“重复”的其实是每个页面都会 内联 少量CSS（这是默认行为）。

// astro.config.mjs
import { defineConfig } from "astro/config";

export default defineConfig({
  build: {
    inlineStylesheets: "never", // force external CSS files, no per-page inlining
  },
});

在布局中保留你当前的导入：

---
// src/layouts/MainLayout.astro
import "../styles/main.css";
---