如何在 Yii2 AppAsset 中包含来自 Bower Asset 的 UIkit

Question

我已经安装了一个包，使我能够添加和使用 uikit css 和 js 文件。它使我能够通过将以下代码添加到 main.php.

来添加 css 文件和 js 文件

\worstinme\uikit\Asset::register($this);

此代码将 css 添加到页眉，并将 js 文件添加到页脚。但是，我无法控制它们的位置，因此它与我添加的其他一些文件冲突。见下文：

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/fonts/style.min.css',
        'css/fonts/s9dicons.css',
        'css/template.css', 
    ];
    public $js = [
        'js/main.js',   
    ];
    public $depends = [
        'yii\web\YiiAsset', \ loads jquery
        //'yii\bootstrap\BootstrapAsset',
    ];
}

在我的主要布局头中，我有以下代码：

\worstinme\uikit\Asset::register($this);
AppAsset::register($this);

如果我使用上面的，它加载 uikit.css first before style.min.css, s9dicons.css 和 template.css 很好但是在页脚中，它还在 jquery.js 和 main.js 之前加载 uikit.js first 和 main.js 这是错误的。如果我把 \worstinme\uikit\Asset::register($this); 放在 AppAsset::register($this); 之后，问题就会反过来。

我如何放置它，使 uikit.css 文件首先加载，uikit.js 文件在 jquery.js 之后而不是在 [=52= 之前加载] main.js?

worstinme 应用程序从 vendor/bower-assets/uikit 获取 uikit css 和 js 文件。我检查了它的 Asset.php 文件并找到了下面的代码：

namespace worstinme\uikit; use yii\web\AssetBundle; class Asset extends AssetBundle { /** * {@inheritdoc} */ public $sourcePath = '@bower/uikit/dist'; /** * {@inheritdoc} */ public $css = [ 'css/uikit.min.css', ]; /** * {@inheritdoc} */ public $js = [ 'js/uikit.min.js', ]; /** * {@inheritdoc} */ public $depends = [ ]; }

所以我在想，我是否可以避免使用\worstinme\uikit\Asset::register($this);而直接将uikit.css和uikit.js从源中分离到AppAsset.php中作为解决方案？看来分开后我就能控制他们的位置了

Answer 1

我通过在 assets 文件夹中创建一个文件 UikitAsset.php 来解决这个问题。它包含以下代码：

<?php

namespace app\assets; 

use yii\web\AssetBundle; 

class UikitAsset extends AssetBundle 
{ 
    public $sourcePath = '@bower/uikit/dist'; 
    public $baseUrl = '@web'; 
    public $css = [
        'css/uikit.min.css',
    ];
    public $js = [
        'js/uikit.min.js',
    ];
}

然后我继续 AppAsset.php 并添加如下代码：

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * Main frontend application asset bundle.
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/fonts/style.min.css',
        'css/fonts/s9dicons.css',
        'css/template.css', 
    ];
    public $js = [
        'js/main.js',   
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        '\app\assets\UikitAsset',
    ];
}

这解决了问题。将 css 文件和 js 文件放在正确的位置。我也不必再次将 \worstinme\uikit\Asset::register($this); 添加到我的布局文件头来加载文件。

如何在 Yii2 AppAsset 中包含来自 Bower Asset 的 UIkit

How to include UIkit from Bower Asset inside Yii2 AppAsset

php

bower

yii2