使用自定义前缀和作用域模式可使UIkit在任何环境中都能正常工作。
默认情况下，UIkit中的所有类和属性都以 uk- 开头。在将UIkit引入现有项目或将其与其他框架结合时，这可以避免名称冲突。UIkit允许更改该前缀。这甚至允许同时使用多个版本的UIkit。此外，作用域模式允许将UIkit样式限制为仅影响页面上的某些部分。
使用自定义前缀允许在同一页面上使用多个版本的UIkit。 当您构建类似CMS插件之类的内容时，可能需要使用此功能。 在这种情况下，您不知道是否会加载其他版本的UIkit，因此最好使用自定义前缀。
当你 从GitHub源安装UIKit, 您可以用自定义的前缀进行编译。例如 xyz，如果您选择一个自定义前缀，则所有属性和类现在都将以该前缀开头，例如 xyz-grid 而不是 uk-grid。 UIkit 也将重命名为 xyzUIkit。
yarn prefix -- -p xyz # 用自定义前缀 `xyz` 替换注意 yarn prefix 将提示您输入前缀。
该脚本将遍历文件 /dist 文件夹中的所有CSS文件，并将其替换为您的自定义前缀版本。
注意 基本组件仍将包含影响某些基本HTML元素的样式。为避免这种情况，请创建不包含Base组件的 自定义版本 或使用作用域模式。
使用作用域版本的UIkit可以将样式限制为仅应用于文档的特定部分。在管理界面的环境中，比如WordPress或Joomla的后端，这可能是必需的。 从GitHub源安装UIKit后，可以将UIkit重新编译为作用域版本。
yarn scope注意 输入 yarn 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的位置，例如所述组件的默认容器。
为此，请设置以下参数：
// 只需通过选择器
UIkit.container = '.uk-scope';
...
// 或者您可以直接设置元素，例如：
UIkit.container = document.getElementById('#id-of-scope-element');上一篇： Custom-icons
下一篇： Rtl
# 避免冲突
<p class="uk-text-lead">使用自定义前缀和作用域模式可使UIkit在任何环境中都能正常工作。</p>
默认情况下，UIkit中的所有类和属性都以 `uk-` 开头。在将UIkit引入现有项目或将其与其他框架结合时，这可以避免名称冲突。UIkit允许更改该前缀。这甚至允许同时使用多个版本的UIkit。此外，作用域模式允许将UIkit样式限制为仅影响页面上的某些部分。
***
## Custom prefix-自定义前缀
使用自定义前缀允许在同一页面上使用多个版本的UIkit。 当您构建类似CMS插件之类的内容时，可能需要使用此功能。 在这种情况下，您不知道是否会加载其他版本的UIkit，因此最好使用自定义前缀。
当你 [从GitHub源安装UIKit](installation.md#compile-from-github-source), 您可以用自定义的前缀进行编译。例如 `xyz`，如果您选择一个自定义前缀，则所有属性和类现在都将以该前缀开头，例如 `xyz-grid` 而不是 `uk-grid`。 `UIkit` 也将重命名为 `xyzUIkit`。
```sh
yarn prefix -- -p xyz # 用自定义前缀 `xyz` 替换
```
**注意** `yarn prefix` 将提示您输入前缀。
该脚本将遍历文件 `/dist` 文件夹中的所有CSS文件，并将其替换为您的自定义前缀版本。
**注意** 基本组件仍将包含影响某些基本HTML元素的样式。为避免这种情况，请创建不包含Base组件的 [自定义版本](less.md) 或使用作用域模式。
***
## Scope mode-作用域模式
使用作用域版本的UIkit可以将样式限制为仅应用于文档的特定部分。在管理界面的环境中，比如WordPress或Joomla的后端，这可能是必需的。 [从GitHub源安装UIKit](installation.md#compile-from-github-source)后，可以将UIkit重新编译为作用域版本。
```sh
yarn scope
```
**注意** 输入 ```yarn scope -- -h``` 以获取更多选项。
您将在 `/dist` 文件夹中找到生成的CSS和JS文件。 若要使用作用域版本，请将带有UIkit标记的文档部分包装在具有 `.uk-scope` 类的元素中。
```html
<!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的位置，例如所述组件的默认容器。
为此，请设置以下参数：
```javascript
// 只需通过选择器
UIkit.container = '.uk-scope';
...
// 或者您可以直接设置元素，例如：
UIkit.container = document.getElementById('#id-of-scope-element');
```