Как включить UIkit из Bower Asset в Yii2 AppAsset - PullRequest
Новая
       25

Как включить UIkit из Bower Asset в Yii2 AppAsset

0 голосов
/ 04 апреля 2019

Я установил пакет, который позволяет мне добавлять и использовать файлы uikit css и js. Это позволяет мне добавлять файлы css и js, добавив следующий код в main.php.

\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?

Приложение worstinme извлекает файлы uikit css и js из vendor/bower-assets/uikit. Я проверил файл 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 непосредственно в качестве решения? Похоже, я смогу контролировать их положение в разлуке.

1 Ответ

1 голос
/ 04 апреля 2019

Я исправил это, создав файл 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); в заголовок моего файла макета для загрузки файлов.

...