テーマを構成する方法

前の例では、全てのカスタムルールを「/custom/my-theme.less」に直接追加しています。いくつかの変数を変更して完成としている場合は、全く問題ありません。

ただし、大規模なカスタマイズの場合は、このファイルをLessコンパイラのエントリポイントとしてのみ使用することをお勧めします。
サブフォルダー内のコンポーネントごとに、全てのルールを1つのファイルに分類することをお勧めします。デフォルトのテーマ「/src/less/uikit.theme.less」にあるものと同じ構造です。

NOTE例では、完全なUIkitプロジェクトの「/custom」ディレクトリにテーマを構築していることを前提としています。
独自のビルドプロセスを設定している場合は、これらのパスを適応させることができます。

custom/

    <!-- entry file for Less compiler -->
    my-theme.less

    <!-- folder with single Less files -->
    my-theme/

        <!-- imports all components in this folder -->
        _import.less

        <!-- one file per customized component -->
        accordion.less
        alert.less
        ...

Lessコンパイラのエントリポイント「/custom/my-theme.less」

// Core
@import "../../src/less/uikit.less";

// Theme
@import "my-theme/_import.less";

テーマフォルダには、すべての単一コンポーネントのカスタマイズをインポートする1つのファイル「custom/my-theme/_import.less」があります。

@import "accordion.less";
@import "alert.less";
// ...

NOTEこの設定により、使用しないコンポーネントのインポートステートメントを削除できます。
これにより、CSSが小さくなります。「src/less/components/_import.less」にリストされている正しいインポート順序を保持するようにしてください。