SvelteKit 组件库实战用 unocss/svelte-scoped/preprocess 在库中安全使用 UnoCSS【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss本篇以 UnoCSS 仓库中的 sveltekit-preprocess 示例 为核心讲解如何借助unocss/svelte-scoped/preprocess这个 Svelte 预处理器在 SvelteKit 环境下构建一个可打包、可发布的组件库。读完你可以掌握预处理器与 Vite 插件两种集成方式各自适合什么场景、classPrefix的作用与默认值、--at-apply在style块中的用法以及svelte-package打包发布组件库的完整命令流程。为什么组件库场景需要 Svelte 预处理器UnoCSS 最常见的集成方式是 Vite 插件unocss/svelte-scoped/vite它扫描整个工程并注入全局样式表。但如果你的目标是构建组件库并分发给第三方使用情况就不一样了库的消费方通常不会在你的库里安装 UnoCSS 的 Vite 插件组件内用到的原子类必须随组件一起进入产物而不能依赖宿主工程的扫描组件样式需要被作用域化避免类名冲突并保证样式随组件走。因此这个示例的 README 开篇就说明了定位Use UnoCSS via a Svelte preprocessor to enable usage when building a component library.即通过 Svelte 预处理器在组件编译阶段把 UnoCSS 原子类“编译进”组件产物。更多背景可以阅读仓库内的集成文档 svelte-scoped 集成指南。示例工程结构sveltekit-preprocess 示例 是一个标准的 SvelteKit 库工程模板核心文件如下文件职责svelte.config.js注册vitePreprocess与UnoCSS预处理器vite.config.ts挂载unocss/svelte-scoped/vite插件仅服务演示应用uno.config.tsUnoCSS 预设、shortcut 与 safelist 配置src/lib/Button.svelte库内组件演示--at-apply与透传 classsrc/lib/index.ts库入口reexport 组件src/routes/page.svelteSvelteKit 演示页作为组件库的 showcasesrc/app.html注入%unocss-svelte-scoped.global%全局样式占位核心配置一Svelte 预处理器svelte.config.js 是整个示例的枢纽import adapter from sveltejs/adapter-auto import { vitePreprocess } from sveltejs/vite-plugin-svelte import UnoCSS from unocss/svelte-scoped/preprocess /** type {import(sveltejs/kit).Config} */ const config { preprocess: [ vitePreprocess(), UnoCSS({ classPrefix: me-, }), ], kit: { adapter: adapter(), }, vitePlugin: { inspector: { showToggleButton: always, }, }, } export default config要点说明preprocess数组中先跑vitePreprocess()处理style/script langts再跑UnoCSS(...)预处理器处理原子类classPrefix: me-给预处理器生成的作用域类名加统一前缀避免与宿主工程的类名冲突。从源码结构看预处理器入口 在未显式传入时classPrefix默认值为usp-usp 即 UnoCSS Svelte Preprocessor 缩写本示例刻意改为me-以展示可配置性vitePlugin.inspector.showToggleButton: always会在演示应用里常驻显示 UnoCSS Inspector 悬浮按钮方便开发时查看命中情况。核心配置二Vite 插件只做“全局兜底”vite.config.ts 中仍然挂载了unocss/svelte-scoped/vite插件但注释里写得很清楚——组件样式已经交给预处理器了这里只是为了演示应用方便地拿到 reset/preflightsimport { sveltekit } from sveltejs/kit/vite import UnoCSS from unocss/svelte-scoped/vite import { defineConfig } from vite export default defineConfig({ plugins: [ // 既然用了预处理器这里本可不用 UnoCSS // 但设置 onlyGlobal 为 true 可以方便地为演示应用提供 reset 与 preflights UnoCSS({ onlyGlobal: true, injectReset: unocss/reset/tailwind.css, }), sveltekit(), ], })参数含义onlyGlobal: trueVite 插件只生成全局样式reset、preflights、safelist不再参与组件级扫描。从源码看_vite/index.ts 中当onlyGlobal为真时会跳过组件类名收集分支且该插件自身的classPrefix默认值为uno-与预处理器的usp-区分开两类产物互不干扰injectReset: unocss/reset/tailwind.css注入 Tailwind 风格的 reset。仓库内的 reset 包 提供了tailwind.css、tailwind-compat.css、tailwind-v4.css、eric-meyer.css等多种 reset 可选。配套的 src/app.html 中有一行关键占位符!-- 用于从 unocss/svelte-scoped/vite 引入全局样式可选的 reset、preflights 与 safelists 方便构建演示应用。如果你有自己偏好的 reset把 %unocss-svelte-scoped.global% 放在其前面即可 -- %unocss-svelte-scoped.global%它由 Vite 插件替换为style标签把全局样式注入head注释同时提醒组件级的作用域样式会落在 SvelteKit 的%sveltekit.head%位置因此全局样式要放在前面才能让组件样式正常覆盖它。UnoCSS 配置预设、shortcut 与 safelistuno.config.ts 演示了组件库中常见的配置组合import { defineConfig, presetIcons, presetTypography, presetWebFonts, presetWind3, } from unocss export default defineConfig({ shortcuts: [ { logo: i-logos:svelte-icon w-7em h-7em transform transition-300 }, ], presets: [ presetWind3(), presetIcons({ prefix: i-, extraProperties: { display: inline-block, vertical-align: middle, }, }), presetTypography(), presetWebFonts({ fonts: { // 这些配置会扩展默认主题 // sans: Roboto, mono: [Fira Code, Fira Mono:400,700], }, }), ], safelist: [bg-orange-300, prose], })shortcuts里定义了logo这个自定义快捷类被page.svelte中的div classlogo bg-red-100 /使用presetIcons配了i-前缀与inline-block/vertical-align两个附加属性组件里的span classi-logos:svelte-icon /依赖iconify-json/logos图标集见 package.json 的 devDependenciessafelist中的bg-orange-300、prose保证即使没被扫描到也会输出对“全局兜底”的 Vite 插件尤其有用。组件实现--at-apply与 class 透传库组件 src/lib/Button.svelte 是理解本方案的关键script langts export let onclick: () any; /script button classfont-semibold {$$props.class} on:click{onclick} typebutton span classi-logos:svelte-icon / slot //button style button { --at-apply: bg-red-100 hover:bg-red-200 p-3 rounded dark:bg-red-700 dark:hover:bg-red-600; } /style两处 UnoCSS 用法的分工模板内的原子类font-semibold、i-logos:svelte-icon会被预处理器在 Svelte 编译阶段处理产物中随组件携带对应样式这是“库消费方无需装 UnoCSS 也能生效”的根本原因style块里的--at-apply是 UnoCSS 指令语法把任意原子类串应用到一个普通 CSS 选择器上。这里连hover:、dark:变体都通过一条指令写入等效于手写了完整的状态样式{$$props.class}透传外部传入的类如演示页的classmb-2保持组件的灵活性。演示页 page.svelte 展示了标准用法Button classmb-2 onclick{() alert(hello!)}Hello/Button库入口 src/lib/index.ts 则只有一行// Reexport your entry components here export * as Button from ./Button.svelte开发、打包与发布流程README 给出的标准工作流package.json 中可核对每个脚本的真实实现# 安装依赖并启动开发服务器vite dev npm install npm run dev # 打包组件库svelte-kit sync svelte-package publint npm run package # 构建生产版演示应用vite build npm run package npm run build # 本地预览生产构建 npm run preview # 发布到 npmprepublishOnly 会先自动执行 npm run package npm run publish几个值得注意的工程细节package脚本末尾的publint会在发布前校验包清单合法性prepublishOnly: npm run package保证执行npm publish前产物必定是最新的exports只暴露./dist/index.jssvelte条件导出与./dist/index.d.tstypes条件导出files: [dist]限定发布内容svelte字段指向同一入口——这些都是svelte-package消费 Svelte 库组件的标准约定意味着预处理器产出的作用域样式会随 dist 内组件文件一起被消费方加载仓库内示例通过link:../../packages-integrations/svelte-scoped等方式以 workspace 链接直接引用本地 svelte-scoped 包 与 unocss 主包独立复现时改为依赖对应 npm 版本即可。小结两种集成方式的边界结合本示例可以把分工讲清楚集成方式入口classPrefix 默认值适用场景预处理器unocss/svelte-scoped/preprocess注册在svelte.config.jsusp-见 _preprocess/index.ts组件库原子类在编译期作用域化并进入产物Vite 插件onlyGlobal: trueunocss/svelte-scoped/vite注册在vite.config.tsuno-见 _vite/index.ts演示应用/宿主工程提供 reset、preflights、safelist 等全局样式这套“预处理器管组件、Vite 插件管全局”的组合是 SvelteKit 技术栈下用 UnoCSS 构建可发布组件库的推荐实践。更多预处理器细节与 API 参数可继续阅读 docs/integrations/svelte-scoped.md 以及 svelte-scoped 包的测试用例其中包含classPrefix生效行为的直接验证。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
SvelteKit 组件库实战用 unocss/svelte-scoped/preprocess 在库中安全使用 UnoCSS【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss本篇以 UnoCSS 仓库中的 sveltekit-preprocess 示例 为核心讲解如何借助unocss/svelte-scoped/preprocess这个 Svelte 预处理器在 SvelteKit 环境下构建一个可打包、可发布的组件库。读完你可以掌握预处理器与 Vite 插件两种集成方式各自适合什么场景、classPrefix的作用与默认值、--at-apply在style块中的用法以及svelte-package打包发布组件库的完整命令流程。为什么组件库场景需要 Svelte 预处理器UnoCSS 最常见的集成方式是 Vite 插件unocss/svelte-scoped/vite它扫描整个工程并注入全局样式表。但如果你的目标是构建组件库并分发给第三方使用情况就不一样了库的消费方通常不会在你的库里安装 UnoCSS 的 Vite 插件组件内用到的原子类必须随组件一起进入产物而不能依赖宿主工程的扫描组件样式需要被作用域化避免类名冲突并保证样式随组件走。因此这个示例的 README 开篇就说明了定位Use UnoCSS via a Svelte preprocessor to enable usage when building a component library.即通过 Svelte 预处理器在组件编译阶段把 UnoCSS 原子类“编译进”组件产物。更多背景可以阅读仓库内的集成文档 svelte-scoped 集成指南。示例工程结构sveltekit-preprocess 示例 是一个标准的 SvelteKit 库工程模板核心文件如下文件职责svelte.config.js注册vitePreprocess与UnoCSS预处理器vite.config.ts挂载unocss/svelte-scoped/vite插件仅服务演示应用uno.config.tsUnoCSS 预设、shortcut 与 safelist 配置src/lib/Button.svelte库内组件演示--at-apply与透传 classsrc/lib/index.ts库入口reexport 组件src/routes/page.svelteSvelteKit 演示页作为组件库的 showcasesrc/app.html注入%unocss-svelte-scoped.global%全局样式占位核心配置一Svelte 预处理器svelte.config.js 是整个示例的枢纽import adapter from sveltejs/adapter-auto import { vitePreprocess } from sveltejs/vite-plugin-svelte import UnoCSS from unocss/svelte-scoped/preprocess /** type {import(sveltejs/kit).Config} */ const config { preprocess: [ vitePreprocess(), UnoCSS({ classPrefix: me-, }), ], kit: { adapter: adapter(), }, vitePlugin: { inspector: { showToggleButton: always, }, }, } export default config要点说明preprocess数组中先跑vitePreprocess()处理style/script langts再跑UnoCSS(...)预处理器处理原子类classPrefix: me-给预处理器生成的作用域类名加统一前缀避免与宿主工程的类名冲突。从源码结构看预处理器入口 在未显式传入时classPrefix默认值为usp-usp 即 UnoCSS Svelte Preprocessor 缩写本示例刻意改为me-以展示可配置性vitePlugin.inspector.showToggleButton: always会在演示应用里常驻显示 UnoCSS Inspector 悬浮按钮方便开发时查看命中情况。核心配置二Vite 插件只做“全局兜底”vite.config.ts 中仍然挂载了unocss/svelte-scoped/vite插件但注释里写得很清楚——组件样式已经交给预处理器了这里只是为了演示应用方便地拿到 reset/preflightsimport { sveltekit } from sveltejs/kit/vite import UnoCSS from unocss/svelte-scoped/vite import { defineConfig } from vite export default defineConfig({ plugins: [ // 既然用了预处理器这里本可不用 UnoCSS // 但设置 onlyGlobal 为 true 可以方便地为演示应用提供 reset 与 preflights UnoCSS({ onlyGlobal: true, injectReset: unocss/reset/tailwind.css, }), sveltekit(), ], })参数含义onlyGlobal: trueVite 插件只生成全局样式reset、preflights、safelist不再参与组件级扫描。从源码看_vite/index.ts 中当onlyGlobal为真时会跳过组件类名收集分支且该插件自身的classPrefix默认值为uno-与预处理器的usp-区分开两类产物互不干扰injectReset: unocss/reset/tailwind.css注入 Tailwind 风格的 reset。仓库内的 reset 包 提供了tailwind.css、tailwind-compat.css、tailwind-v4.css、eric-meyer.css等多种 reset 可选。配套的 src/app.html 中有一行关键占位符!-- 用于从 unocss/svelte-scoped/vite 引入全局样式可选的 reset、preflights 与 safelists 方便构建演示应用。如果你有自己偏好的 reset把 %unocss-svelte-scoped.global% 放在其前面即可 -- %unocss-svelte-scoped.global%它由 Vite 插件替换为style标签把全局样式注入head注释同时提醒组件级的作用域样式会落在 SvelteKit 的%sveltekit.head%位置因此全局样式要放在前面才能让组件样式正常覆盖它。UnoCSS 配置预设、shortcut 与 safelistuno.config.ts 演示了组件库中常见的配置组合import { defineConfig, presetIcons, presetTypography, presetWebFonts, presetWind3, } from unocss export default defineConfig({ shortcuts: [ { logo: i-logos:svelte-icon w-7em h-7em transform transition-300 }, ], presets: [ presetWind3(), presetIcons({ prefix: i-, extraProperties: { display: inline-block, vertical-align: middle, }, }), presetTypography(), presetWebFonts({ fonts: { // 这些配置会扩展默认主题 // sans: Roboto, mono: [Fira Code, Fira Mono:400,700], }, }), ], safelist: [bg-orange-300, prose], })shortcuts里定义了logo这个自定义快捷类被page.svelte中的div classlogo bg-red-100 /使用presetIcons配了i-前缀与inline-block/vertical-align两个附加属性组件里的span classi-logos:svelte-icon /依赖iconify-json/logos图标集见 package.json 的 devDependenciessafelist中的bg-orange-300、prose保证即使没被扫描到也会输出对“全局兜底”的 Vite 插件尤其有用。组件实现--at-apply与 class 透传库组件 src/lib/Button.svelte 是理解本方案的关键script langts export let onclick: () any; /script button classfont-semibold {$$props.class} on:click{onclick} typebutton span classi-logos:svelte-icon / slot //button style button { --at-apply: bg-red-100 hover:bg-red-200 p-3 rounded dark:bg-red-700 dark:hover:bg-red-600; } /style两处 UnoCSS 用法的分工模板内的原子类font-semibold、i-logos:svelte-icon会被预处理器在 Svelte 编译阶段处理产物中随组件携带对应样式这是“库消费方无需装 UnoCSS 也能生效”的根本原因style块里的--at-apply是 UnoCSS 指令语法把任意原子类串应用到一个普通 CSS 选择器上。这里连hover:、dark:变体都通过一条指令写入等效于手写了完整的状态样式{$$props.class}透传外部传入的类如演示页的classmb-2保持组件的灵活性。演示页 page.svelte 展示了标准用法Button classmb-2 onclick{() alert(hello!)}Hello/Button库入口 src/lib/index.ts 则只有一行// Reexport your entry components here export * as Button from ./Button.svelte开发、打包与发布流程README 给出的标准工作流package.json 中可核对每个脚本的真实实现# 安装依赖并启动开发服务器vite dev npm install npm run dev # 打包组件库svelte-kit sync svelte-package publint npm run package # 构建生产版演示应用vite build npm run package npm run build # 本地预览生产构建 npm run preview # 发布到 npmprepublishOnly 会先自动执行 npm run package npm run publish几个值得注意的工程细节package脚本末尾的publint会在发布前校验包清单合法性prepublishOnly: npm run package保证执行npm publish前产物必定是最新的exports只暴露./dist/index.jssvelte条件导出与./dist/index.d.tstypes条件导出files: [dist]限定发布内容svelte字段指向同一入口——这些都是svelte-package消费 Svelte 库组件的标准约定意味着预处理器产出的作用域样式会随 dist 内组件文件一起被消费方加载仓库内示例通过link:../../packages-integrations/svelte-scoped等方式以 workspace 链接直接引用本地 svelte-scoped 包 与 unocss 主包独立复现时改为依赖对应 npm 版本即可。小结两种集成方式的边界结合本示例可以把分工讲清楚集成方式入口classPrefix 默认值适用场景预处理器unocss/svelte-scoped/preprocess注册在svelte.config.jsusp-见 _preprocess/index.ts组件库原子类在编译期作用域化并进入产物Vite 插件onlyGlobal: trueunocss/svelte-scoped/vite注册在vite.config.tsuno-见 _vite/index.ts演示应用/宿主工程提供 reset、preflights、safelist 等全局样式这套“预处理器管组件、Vite 插件管全局”的组合是 SvelteKit 技术栈下用 UnoCSS 构建可发布组件库的推荐实践。更多预处理器细节与 API 参数可继续阅读 docs/integrations/svelte-scoped.md 以及 svelte-scoped 包的测试用例其中包含classPrefix生效行为的直接验证。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
