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.

Answer 1

I fixed this by creating a file UikitAsset.php inside the assets folder. It contains the code below:

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

I then proceed to AppAsset.php and added the code as below:

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

That fixed the issue. Placing the css file and the js file in their right places. I also did not have to add \\worstinme\\uikit\\Asset::register($this); to my layout file head again to load the files.