避免衝突

使用自訂前綴和範圍模式，使 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');