使用自定义前缀和作用域模式，让 UIkit 在任何环境中都能正常工作。
默认情况下，UIkit 中的所有类和属性都以 uk- 前缀开头。这在将 UIkit 引入现有项目或将其与其他框架结合使用时，可以避免命名冲突。UIkit 允许更改该前缀。这甚至允许在同一页面上使用多个版本的 UIkit。此外，作用域模式允许您将 UIkit 样式限制为仅影响页面的特定部分。
使用自定义前缀允许在同一页面上使用多个版本的 UIkit。当您构建类似 CMS 插件的东西时，这可能需要。在这种情况下，您不知道可能加载了哪些其他版本的 UIkit，因此最好使用自定义前缀。
如果您已 从 GitHub 源代码设置了 UIkit，则可以使用自定义前缀对其进行编译。如果您选择自定义前缀，例如 xyz，则所有属性和类现在将以该前缀开头，例如 xyz-grid 而不是 uk-grid。全局 JavaScript 对象 UIkit 也将被重命名为 xyzUIkit。
pnpm prefix -- -p xyz # replace xyz with your custom prefix.注意 pnpm prefix 会提示您输入前缀。
该脚本将遍历 /dist 文件夹中的所有 CSS 文件，并将其替换为自定义前缀版本。
注意 基础组件仍将包含影响某些基本 HTML 元素的样式。为了避免这种情况，请创建 自定义构建，不包含基础组件，或使用作用域模式。
使用 UIkit 的作用域版本可以让您将样式限制为仅应用于文档的特定部分。这可能需要在管理界面环境中，例如 WordPress 或 Joomla 的后端。如果您已 从 GitHub 源代码设置了 UIkit，则可以将 UIkit 重新编译为作用域版本。
pnpm scope注意 输入 pnpm scope -- -h 可获取更多选项。
您将在 /dist 文件夹中找到生成的 CSS 和 JS 文件。要使用作用域版本，请将包含 UIkit 标记的文档部分包装在一个带有 .uk-scope 类的元素中。
<!DOCTYPE html>
<html>
<head>…</head>
<body>
<!-- non UIkit markup -->
…
<div class="uk-scope">
<!-- your UIkit markup -->
…
</div>
</body>
</html>现在，您需要告诉 uk-modal、uk-tooltip 和 uk-lightbox 在它们没有设置 container 选项时在 DOM 中将自身附加到哪里，例如，这些组件的默认容器。为此，请设置以下参数
// simply pass the selector
UIkit.container = '.uk-scope';
// or you can set an element directly, for example:
UIkit.container = document.getElementById('#id-of-scope-element');