Svelte 作用域
将每个 Svelte 组件的实用样式生成的 CSS 直接放入 Svelte 组件的 <style> 块，而不是全局 CSS 文件。
这个组件：
<div class="mb-1" />被转换为：
<div class="uno-ei382o" />
<style>
:global(.uno-ei382o) {
margin-bottom: 0.25rem;
}
</style>何时使用
| 使用场景 | 描述 | 使用的包 | |
|---|---|---|---|
| 小型应用 | ❌ | 使用 1 个全局 CSS 文件更方便。使用 Svelte/SvelteKit 的常规 Vite 插件。 | unocss/vite |
| 大型应用 | ✅ | Svelte 作用域可以帮助你避免不断增长的全局 CSS 文件。 | @unocss/svelte-scoped/vite |
| 组件库 | ✅ | 生成的样式直接放在构建的组件中，无需在使用应用的构建管道中使用 UnoCSS。 | @unocss/svelte-scoped/preprocess |
工作原理
常规的 UnoCSS/Tailwind CSS 设置会将实用样式放在具有适当顺序的全局 CSS 文件中。相比之下，Svelte 作用域将样式分布在许多任意排序的 Svelte 组件 CSS 文件中。但是，它必须保持实用样式为全局样式，以允许它们在需要时具有上下文感知能力，比如从右到左和下面列出的其他用例。这提出了一个挑战，通过使用 Svelte 的 :global() 包装器来解决，该包装器选择退出默认的 Svelte CSS 哈希方法，而是使用基于文件名 + 类名的哈希来编译唯一的类名，这些类名可以在没有样式冲突的情况下全局化。
使用
由于 Svelte 作用域重写了你的实用类名，你可以写类名的位置是有限的：
| 支持的语法 | 示例 |
|---|---|
| Class 属性 | <div class="mb-1" /> |
| Class 指令 | <div class:mb-1={condition} /> |
| Class 指令简写 | <div class:logo /> |
| Class 属性 | <Button class="mb-1" /> |
Svelte 作用域旨在成为使用实用样式的项目的直接替换。因此，还支持在类属性中找到的表达式（例如 <div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />），但我们建议你今后使用类指令语法。另请注意，如果你以其他方式使用过类名，如将它们放在 <script> 块中或使用属性化模式，则在使用 Svelte 作用域之前需要采取额外的步骤。你可以利用 safelist 选项，并查看下面的预设部分以获取更多提示。
上下文感知
尽管样式分布在应用的 Svelte 组件中，但它们仍然是全局类，并且将与应用外部找到的元素相关联。以下是一些示例：
父级依赖
依赖于父组件中找到的属性的类：
<div class="dark:mb-2 rtl:right-0"></div>转换为：
<div class="uno-3hashz"></div>
<style>
:global(.dark .uno-3hashz) {
margin-bottom: 0.5rem;
}
:global([dir="rtl"] .uno-3hashz) {
right: 0rem;
}
</style>子元素影响
你可以在 3 个子元素之间添加空间，其中一些位于不同的组件中：
<div class="space-x-1">
<div>Status: online</div>
<Button>FAQ</Button>
<Button>Login</Button>
</div>转换为：
<div class="uno-7haszz">
<div>Status: online</div>
<Button>FAQ</Button>
<Button>Login</Button>
</div>
<style>
:global(.uno-7haszz > :not([hidden]) ~ :not([hidden])) {
--un-space-x-reverse: 0;
margin-left: calc(0.25rem * calc(1 - var(--un-space-x-reverse)));
margin-right: calc(0.25rem * var(--un-space-x-reverse));
}
</style>将类传递给子组件
你可以向组件添加 class 属性，以允许在使用该组件的任何地方传递自定义类。
<Button class="px-2 py-1">Login</Button>转换为：
<Button class="uno-4hshza">Login</Button>
<style>
:global(.uno-4hshza) {
padding-left:0.5rem;
padding-right:0.5rem;
padding-top:0.25rem;
padding-bottom:0.25rem;
}
</style>在接收组件中实现类的一种简单方法是将它们放在使用 {$$props.class} 的元素上，如 div class="{$$props.class} foo bar" />。
应用指令
你可以在 <style> 块中使用应用指令，可以是 --at-apply、@apply 或使用 applyVariables 选项设置的自定义值。
Svelte 作用域甚至可以正确处理上下文相关的类，如 dark:text-white，而常规的 @unocss/transformer-directives 包无法正确处理，因为它不是专门为 Svelte 样式块构建的。例如，使用 Svelte 作用域，这个组件：
<div />
<style>
div {
--at-apply: rtl:ml-2;
}
</style>将被转换为：
<div />
<style>
:global([dir=\\"rtl\\"]) div {
margin-right: 0.5rem;
}
</style>为了使 rtl:ml-2 正常工作，[dir="rtl"] 选择器被 :global() 包装，以防止 Svelte 编译器自动剥离它，因为组件没有具有该属性的元素。但是，div 不能包含在 :global() 包装器中，因为那样的样式会影响应用中的每个 div。
其他样式块指令
Vite 插件
在 Svelte 或 SvelteKit 应用中，将生成的样式直接注入到你的 Svelte 组件中，同时将最少必要的样式放在全局样式表中。查看 Stackblitz 中的 SvelteKit 示例：
安装
pnpm add -D unocss @unocss/svelte-scopedyarn add -D unocss @unocss/svelte-scopednpm install -D unocss @unocss/svelte-scoped添加插件
在 Vite 配置中添加 @unocss/svelte-scoped/vite：
// vite.config.ts
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import UnoCSS from '@unocss/svelte-scoped/vite'
export default defineConfig({
plugins: [
UnoCSS({
// injectReset: '@unocss/reset/normalize.css', // 查看类型定义以了解所有包含的重置选项或如何传入自己的选项
// ...其他 Svelte 作用域选项
}),
sveltekit(),
],
})添加配置文件
按照下面的描述设置你的 uno.config.ts 文件。
全局样式
虽然几乎所有样式都放置在单个组件中，但仍有一些必须放置在全局样式表中：预置样式、安全列表和可选的重置（如果使用 injectReset 选项）。
将 %unocss-svelte-scoped.global% 占位符添加到你的 <head> 标签中。在 Svelte 中，这是 index.html。在 SvelteKit 中，这将在 app.html 的 %sveltekit.head% 之前：
<head>
<!-- ... -->
<title>使用 UnoCSS Svelte 作用域的 SvelteKit</title>
%unocss-svelte-scoped.global%
%sveltekit.head%
</head>如果使用 SvelteKit，还必须在 src/hooks.server.js 文件的 transformPageChunk 钩子中添加以下内容：
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
const response = await resolve(event, {
transformPageChunk: ({ html }) =>
html.replace(
'%unocss-svelte-scoped.global%',
'unocss_svelte_scoped_global_styles'
),
})
return response
}这个转换必须在路径包含 hooks 和 server 的文件中（例如 src/hooks.server.js、src/hooks.server.ts），因为 svelte-scoped 将在你的服务器钩子文件中查找以将 unocss_svelte_scoped_global_styles 替换为你的全局样式。确保不要从另一个文件导入此转换，例如在使用 @sveltejs/kit/hooks 中的 sequence 时。
在常规的 Svelte 项目中，Vite 的 transformIndexHtml 钩子将自动执行此操作。
Svelte 预处理器
使用实用样式构建一个不依赖于包含配套 CSS 文件的组件库，通过使用预处理器将生成的样式直接放入构建的组件中。查看 Stackblitz 中的 SvelteKit 库示例：
安装
pnpm add -D unocss @unocss/svelte-scopedyarn add -D unocss @unocss/svelte-scopednpm install -D unocss @unocss/svelte-scoped添加预处理器
在 Svelte 配置中添加 @unocss/svelte-scoped/preprocess：
// svelte.config.js
import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/kit/vite'
import UnoCSS from '@unocss/svelte-scoped/preprocess'
const config = {
preprocess: [
vitePreprocess(),
UnoCSS({
// ... 预处理器选项
}),
],
// 其他 Svelte 配置
}开发环境中不要合并类名
在普通应用中使用 Svelte 作用域时，Vite 插件会自动检测 dev 和 build。在开发环境中，类名将保持不同并就地哈希，以便在浏览器开发者工具中轻松切换开关。class="mb-1 mr-1" 将转换为类似 class="_mb-1_9hwi32 _mr-1_84jfy4 的形式。在生产环境中，这些将使用你指定的前缀（默认为 uno-）和基于文件名 + 类名的哈希编译为单个类名，例如 class="uno-84dke3。
如果你希望在使用预处理器时具有相同的行为，则必须根据环境手动设置 combine 选项。一种方法是安装 cross-env 并将开发脚本更新为：
"dev": "cross-env NODE_ENV=development vite dev"然后调整你的 svelte.config.js：
+const prod = process.env.NODE_ENV !== 'development'
const config = {
preprocess: [
vitePreprocess(),
UnoCSS({
+ combine: prod,
}),
],
}添加配置文件
按照下面的描述设置你的 uno.config.ts 文件。
预检样式
使用预处理器时，你可以通过在特定组件中添加 uno-preflights 作为样式属性来包含预检样式：
<style uno-preflights></style>任何以句点开头的特殊预检样式，如 .prose :where(a):not(:where(.not-prose, .not-prose *))，将被 :global() 包装，以避免被 Svelte 编译器自动剥离。
如果你的类不依赖于预检样式，或者构建的组件仅在已包含预检样式的应用中使用，则无需将预检样式添加到单个组件中。
安全列表
使用预处理器时，你可以通过在组件中添加 uno-safelist 作为样式属性来包含安全列表类：
<style uno-safelist></style>你的安全列表样式将被 :global() 包装，以避免被 Svelte 编译器自动剥离。
作用域实用类释放创造力
关于何时使用作用域样式的一些建议：如果你已经到了项目生命周期中的这样一个阶段，每次使用像 .md:max-w-[50vw] 这样的类（你知道它只使用一次）时，你就会感到全局样式表不断增大而感到不适，那么就试试这个包吧。对于需要使用的确切类名的犹豫会抑制创造力。当然，你可以在样式块中使用 --at-apply: md:max-w-[50vw]，但这变得乏味，而且上下文中的样式很有用。此外，如果你想在项目中包含大量图标，你会开始感受到将它们添加到全局样式表的负担。当每个组件承担自身的样式和图标的重量时，你可以继续扩展项目，而无需分析每个新增内容的成本收益。
配置
将你的 UnoCSS 设置放在 uno.config.ts 文件中：
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS 选项
})由于普通 UnoCSS 全局使用和 Svelte 作用域使用的差异，不支持提取器。预设和转换器的支持如下面各节所述。有关所有其他详细信息，请参见配置文件和配置参考。
预设支持
由于在全局样式表中只有少量必要的样式，其他所有样式都包含在每个组件需要的地方，因此预设需要逐个处理：
| 预设 | 支持 | 备注 |
|---|---|---|
| @unocss/preset-uno, @unocss/preset-mini, @unocss/preset-wind, @unocss/preset-icons, @unocss/web-fonts | ✅ | 这些和所有社区插件，例如 unocss-preset-forms，仅依赖规则/变体/预检样式的插件都可以工作。 |
| @unocss/preset-typography | ✅ | 由于此预设会向你的预检样式添加规则集，因此在使用此预设时必须将 prose 类添加到安全列表中，否则预检样式将永远不会被触发。此预设的所有其他类，例如 prose-pink，可以是组件作用域的。 |
| @unocss/preset-rem-to-px | ✅ | 这个和所有仅修改样式输出的预设都可以工作。 |
| @unocss/preset-attributify | - | 预设无法工作。相反，请在 Svelte 作用域 Vite 插件之前使用 unplugin-attributify-to-class Vite 插件（attributifyToClass({ include: [/\.svelte$/] })） |
| @unocss/preset-tagify | - | 添加自定义提取器的预设将无法工作。创建一个预处理器将 <text-red>Hi</text-red> 转换为 <span class="text-red">Hi</span>，然后创建一个 PR 在此处添加链接。 |
对于其他预设，如果它们不依赖于传统的 class="..." 使用方式，你需要先将这些类名预处理为 class="..." 属性。如果它们添加了像排版的 .prose 类这样的预设，那么你需要将触发预设添加的类放入安全列表中。
转换器支持
转换器支持你的 CSS 文件（css|postcss|sass|scss|less|stylus|styl）。要使用它们，请在 vite.config.ts 中的 cssFileTransformers 选项中添加转换器：
// vite.config.ts
import transformerDirectives from '@unocss/transformer-directives'
export default defineConfig({
plugins: [
UnoCSS({
cssFileTransformers: [transformerDirectives()],
}),
sveltekit(),
],
})INFO
由于 Svelte 作用域的工作方式，转换器不支持 Svelte 组件。
许可证
- MIT 许可证 © 2022-现在 Jacob Bowdoin