在 Astro 中配置 Master CSS

通过共享 CSS 入口将 Master CSS 接入 Astro 网站。集成支持静态、运行时和渐进式交付；页面渲染仍由 Astro 负责。

#安装

1. #添加 Master CSS

   在现有的 Astro 项目中，从项目根目录运行安装程序。默认使用静态模式：扫描完整的类名字符串，并输出普通 CSS。

   npm create @master/css@2.0.0 -- --framework astro --yes

2. #连接样式表

   安装程序会创建独立的 CSS 入口：

   src/styles/global.css

   @import '@master/css';

   从页面或布局的 frontmatter 导入它。共享布局会向所有使用它的页面传递样式。在 astro.config.mjs 中，请将 Master CSS 集成与项目现有集成一并保留。

3. #开始使用 Master CSS

   启动开发服务器。从页面 frontmatter 导入 src/styles/global.css，再添加段落。如果多个页面都需要样式，请在共享布局中使用相同的导入。

src/pages/index.astro

---import '../styles/global.css'---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Hello Master CSS</title>  </head>  <body>    <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">      Hello World    </p>  </body></html>

中性色表面、细边框、小圆角，以及四边各 1rem 的内边距。

#检查配置

运行 npm run dev，将 p-md 改为 p-lg，确认内边距从 1rem 增加到 1.5rem。恢复原值后，测试生产页面：

npm run buildnpm run preview

禁用 JavaScript 并重新加载。段落应保留内边距、圆角和凸起表面。如果没有样式，请确认页面或其布局导入了 global.css，并且 Astro 配置包含 Master CSS 集成。自定义定义和局部作用域样式请参阅全局样式。

#使用 CLI 构建静态 CSS

这是 Astro 集成的替代方式。从 astro.config.mjs 中移除 Master CSS 注册，保留其他集成，并移除页面或布局中的 global.css 导入。安装 CLI：

npm install -D @master/css-cli@2.0.0

在项目根目录创建源入口。项目定义也放在这里：

@import '@master/css';

从页面或共享布局的 <head> 链接生成的样式表：

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

先生成 CSS，再构建 Astro：

npx @master/css-cli generate "src/**/*.{astro,html,js,jsx,ts,tsx,vue,svelte}" --output public/master.cssnpm run buildnpm run preview

开发时，在生成命令中加入 --watch，并在第二个终端运行 npm run dev。Astro 会将 public/ 复制到构建输出；请一并部署生成的样式表及其导入资源。如果网站配置了基础路径，请将该路径加在样式表 URL 前。禁用 JavaScript，验证段落样式。

#选择其他渲染模式

默认使用静态模式。其他模式的页面运行时脚本由集成注入，无需单独的浏览器启动代码：

npm create @master/css@2.0.0 -- --framework astro --mode runtime --yes

document.querySelector('#master-check').classList.add('underline')

npm create @master/css@2.0.0 -- --framework astro --mode progressive --yes