避免冲突

使用自定义前缀和作用域模式，使 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');