通过 CDN 使用 50+ UI 组件。无需导入。
在 kiss() 配置中设置 inject 选项， 将 Web Awesome 的 CSS 和 loader 注入到 <head>。 所有 <wa-*> 自定义元素全局可用——无需逐组件导入。
<wa-button variant="brand">品牌</wa-button>
<wa-button variant="danger">危险</wa-button>带 header 和 footer slots 的 Web Awesome 卡片组件。
<wa-card>
<h2 slot="header">标题</h2>
<p>内容</p>
<wa-button slot="footer" variant="brand">操作</wa-button>
</wa-card><wa-badge variant="primary">主要</wa-badge>
<wa-badge variant="danger">危险</wa-badge>通过 inject 选项启用 Web Awesome（推荐）：
// vite.config.ts
import { kiss } from '@kissjs/core'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
kiss({
inject: {
stylesheets: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/styles.css'],
scripts: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/webawesome.loader.js'],
},
}),
]
})旧的 ui: { cdn: true } 快捷方式仍然可用，但已弃用。迁移方法：
// 之前（已弃用）
kiss({ ui: { cdn: true } })
// 之后（推荐）
kiss({
inject: {
stylesheets: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/styles.css'],
scripts: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/webawesome.loader.js'],
},
})inject 选项更灵活——适用于任何 CDN、任何版本、任何外部资源。