如何將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); 再次放入我的布局文件頭以加載文件。