php - How to include UIkit from Bower Asset inside Yii2 AppAsset

Question

I have installed a package that enables me add and make use of uikit css and js files. It enables me to add the css files and js files by adding the following code to main.php.

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

This code adds the css to the header and the js file to the footer. However, I am not able to control their positions so it conflicts with some other files I added. See below:

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',
    ];
}

In my main layout head, I have the codes below:

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

If I use the above, it loads uikit.css first before style.min.css, s9dicons.css and template.css which is fine BUT in the footer, it also loads uikit.js first before jquery.js and main.js which is wrong. If I placed \worstinme\uikit\Asset::register($this); after AppAsset::register($this);, the problem will be the other way around.

How can I place this in a way that the uikit.css file loads first and the uikit.js file load after jquery.js but not before main.js?

The worstinme application fetches the uikit css and js files from vendor/bower-assets/uikit. I checked its Asset.php file and found the code below:

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 = [

    ];

}

So I am thinking, can I avoid using \worstinme\uikit\Asset::register($this); and just get the uikit.css and uikit.js separately from the source into the AppAsset.php directly as the solution? Seems like I will be able to control their position when separated.

标签： phpyii2bower

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);到我的布局文件头来加载文件。