了解uno.config.ts文件的配置项---content

提取

UnoCSS 的工作原理是从代码库中搜索使用的样式类并按需生成相应的 CSS。我们称这个过程为提取。

content 配置项

content 是 UnoCSS 配置中的一个重要部分，用于定义哪些文件的内容需要被解析。它通常用于支持按需生成 CSS 规则，确保只生成实际用到的样式，从而优化最终的 CSS 文件大小。

pipeline ****配置

pipeline 是 content 的子配置项，用于定义内容解析的管道（pipeline）。它包含两个主要部分：

• include：指定哪些文件路径或模式需要被解析。
• exclude：指定哪些文件路径或模式需要被排除（在这段代码中未使用）。

// uno.config.ts
export default defineConfig({
  content: {
    pipeline: {
      include: [
        // the default
        /.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|?)/,
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
      // exclude files
      // exclude: []
    },
  },
})

 /.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|?)/

这是一个正则表达式，用于匹配以下文件类型：

• .vue（Vue 组件文件）
• .svelte（Svelte 组件文件）
• .jsx、.tsx（React 组件文件，支持 TypeScript）
• .mdx、.md（Markdown 文件，支持 MDX 格式）
• .astro（Astro 组件文件）
• .elm（Elm 语言文件）
• .php（PHP 文件）
• .phtml（PHP 模板文件）
• .html（HTML 文件）

这个正则表达式匹配这些文件扩展名的文件，并且允许文件路径以 ? 结尾（例如，用于某些特殊查询参数的场景）。

'src/**/*.{js,ts}'

通过这种配置，UnoCSS 可以扫描这些文件的内容，提取其中使用的 UnoCSS 类名，并生成对应的 CSS 规则。这有助于实现按需加载样式，减少生成的 CSS 文件大小，同时确保只包含实际用到的样式。

可以在希望 UnoCSS 扫描的文件中的任何位置添加 @unocss-include 魔术注释（基于每个文件）。如果需要扫描 *.js or *.ts 文件，也是这样配置。

使用 @unocss-include 魔术注释

1. 在文件中添加注释

在需要 UnoCSS 扫描的文件顶部添加以下注释：

// @unocss-include

这个注释会告诉 UnoCSS，即使该文件没有被默认的解析规则匹配到，也需要扫描该文件以提取 UnoCSS 类名。

同样，您还可以添加 @unocss-ignore 来绕过整个文件的扫描和转换。

如果您希望 UnoCSS 跳过一段代码，不从中提取任何内容，您可以成对使用 @unocss-skip-start @unocss-skip-end 。注意，必须成对使用才有效。

<p class="text-green text-xl">
  Green Large
</p>

<!-- @unocss-skip-start -->
<!-- `text-red` will not be extracted -->
<p class="text-red">
  Red
</p>
<!-- @unocss-skip-end -->

从文件系统中提取

如果您使用的集成无法访问构建工具管道（例如，PostCSS 插件），或者您正在与后端框架集成，这样代码就不会通过 pipeline ，您可以手动指定要提取的文件。

// uno.config.ts
export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})

从行内文本中提取

inline 是 content 的子配置项，用于定义直接提供的内联内容。它支持以下两种类型的内容：

• 直接提供的 HTML 字符串：可以直接写在配置文件中。
• 异步函数：可以通过异步函数动态获取内容，例如从网络请求中获取 HTML 内容。

export default defineConfig({
  content: {
    inline: [
      // plain text
      '<div class="p-4 text-red">Some text</div>',
      // async getter
      async () => {
        const response = await fetch('https://example.com');
        return response.text();
      },
    ],
  },
});

'<div class="p-4 text-red">Some text</div>',

• 这是一个直接提供的 HTML 字符串。
• UnoCSS 会解析这段 HTML，提取其中的类名（如 p-4 和 text-red），并生成对应的 CSS 规则。

异步函数

async () => {
  const response = await fetch('https://example.com');
  return response.text();
},

• 这是一个异步函数，用于动态获取内容。
• 在这个例子中，函数通过 fetch 请求从 https://example.com 获取内容。
• fetch 请求返回一个 Response 对象，调用 response.text() 方法可以获取 HTML 内容。
• UnoCSS 会解析返回的 HTML 内容，提取其中的类名，并生成对应的 CSS 规则。