避免冲突

使用自定义前缀和 scope 模式，让 UIkit 能在任何环境中工作。

默认情况下，UIkit 中的所有类和属性都以 uk- 前缀开头。这样在把 UIkit 引入已有项目、或与其他框架组合使用时，可以避免命名冲突。UIkit 允许修改该前缀，甚至可以借此在同一页面中并排使用多个版本的 UIkit。此外，scope 模式可以让你把 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 文件，并把它们替换为使用你自定义前缀的版本。

注意 Base 组件仍然会包含一些影响部分基础 HTML 元素的样式。要避免这种情况，可以创建一个不包含 Base 组件的自定义构建，或者使用 scope 模式。

Scope 模式

使用 scope 版本的 UIkit，可以让你把样式限制为只应用到文档的某个部分。在管理后台这类环境中可能需要这样做，例如 WordPress 或 Joomla 的后台。当你已经 从 GitHub 源码搭建 UIkit 后，就可以把 UIkit 重新编译为 scope 版本。

pnpm scope

注意 输入 pnpm scope -- -h 可获取更多选项。

你会在 /dist 文件夹中找到生成的 CSS 和 JS 文件。要使用 scope 版本，请把你的 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');