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

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 第一 前 style.min.css，s9dicons.css和template.css这是好的，但在页脚，它还加载uikit.js 第一之前jquery.js和main.js这是错的。 如果我放置\\worstinme\\uikit\\Asset::register($this); 在AppAsset::register($this); ，问题将会反过来。

如何以一种方式将uikit.css文件首先加载，并将uikit.js文件加载到jquery.js之后但不在 main.js 之前 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

我通过在资产文件夹中创建文件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); 再次放入我的布局文件头以加载文件。