yii2-bootstrap5/docs/guide-de/assets-setup.md

Asset-Konfiguration

Diese Erweiterung beruht auf Bower und/oder NPM Packages für die Asset Installation. Bevor Sie diese Erweiterung einsetzen, sollten Sie entscheiden, auf welche Weise Sie diese Packages installieren möchten.

Verwendung des asset-packagist Repository

Sie können asset-packagist.or als Package-Quelle für die Bootstrap-Assets angeben. Fügen Sie dazu folgende Zeilen zur composer.json-Datei ihres Projekts hinzu:

"repositories": [
    {
        "type": "composer",
        "url": "https://asset-packagist.org"
    }
]

Passen Sie @npm und @bower in der Konfiguration ihrer Applikation wie folgt an:

return [
    //...
    'aliases' => [
        '@bower' => '@vendor/bower-asset',
        '@npm'   => '@vendor/npm-asset',
    ],
    //...
];

Verwendung des composer asset Plugins

Installieren Sie das composer asset plugin global durch das Ausführen folgendes Befehls:

composer global require "fxp/composer-asset-plugin:^1.4.0"

Fügen Sie folgende Zeilen zur composer.json-Datei ihres Projekts hinzu um das Verzeichnis der Installation von Assets anzupassen falls Sie möchten, das Yii sie verwaltet:

"extra": {
    "asset-installer-paths": {
        "npm-asset-library": "vendor/npm",
        "bower-asset-library": "vendor/bower"
    }
}

Daraufhin können Sie den composer install bzw. update Befehl ausführen um die Boostrap Assets zu installieren.

Warnung: Das Plugin fxp/composer-asset-plugin verlangsamt den composer update Befehl signifikant verglichen zur "asset-packagist"-Methode.

Direkte Verwendung des Bower/NPM Clients

Sie kännen die Bootstrap Assets direkt via Bower oder NPM Client installieren. Fügen Sie dafür folgende Zeilen zur package.json-Datei Ihres Projekts hinzu:

{
    ...
    "dependencies": {
        "bootstrap": "5.1",
        ...
    }
    ...
}

Fügen Sie zur composer.json-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen:

"replace": {
    "npm-asset/bootstrap": ">=5.1"
},

Verwendung des CDN

Sie können die Bootstrap Assets vom offiziellen CDN laden.

Fügen Sie zur composer.json-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen:

"replace": {
    "npm-asset/bootstrap": ">=5.1"
},

Konfigurieren Sie die 'assetManager'-Komponente wie folgt (überschreibt die Bootstrap Asset mit den CDN Links):

return [
    'components' => [
        'assetManager' => [
            // override bundles to use CDN :
            'bundles' => [
                'yii\bootstrap5\BootstrapAsset' => [
                    'sourcePath' => null,
                    'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
                    'css' => [
                        'css/bootstrap.min.css'
                    ],
                ],
                'yii\bootstrap5\BootstrapPluginAsset' => [
                    'sourcePath' => null,
                    'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
                    'js' => [
                        'js/bootstrap.bundle.min.js'
                    ],
                ],
            ],
        ],
        // ...
    ],
    // ...
];

Kompilieren von den .sass Dateien

Falls Sie den Bootstrap Quelltext direkt anpassen möchten, können Sie das CSS direkt von den Quell *.sass-Dateien kompilieren. In diesem Fall macht die Installation der Bootstrap Assets via composer bzw. Bower/NPM kein Sinn, da Sie keine Dateien innerhalb des 'vendor'-Verzeichnisses bearbeiten können. Sie müssen die Bootstrap-Assets manuell herunterladen und sie irgendwo in Ihrem Projekt platzieren (z.B. 'assets/source/bootstrap').

Fügen Sie zur composer.json-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen:

"replace": {
    "npm-asset/bootstrap": ">=5.1"
},

Konfigurieren Sie die 'assetManager'-Komponente wie folgt (überschreibt die Bootstrap Assets):

return [
    'components' => [
        'assetManager' => [
            // override bundles to use local project files :
            'bundles' => [
                'yii\bootstrap5\BootstrapAsset' => [
                    'sourcePath' => '@app/assets/source/bootstrap/dist',
                    'css' => [
                        YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
                    ],
                ],
                'yii\bootstrap5\BootstrapPluginAsset' => [
                    'sourcePath' => '@app/assets/source/bootstrap/dist',
                    'js' => [
                        YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
                    ]
                ],
            ],
        ],
        // ...
    ],
    // ...
];

Nach dem Verändern des Bootstrap Quellcodes, stellen Sie sicher, dass sie neu kompiliert werden, z.B. mittels npm run dist.