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，然后先加载uikit.js 先 style.min.css，s9dicons.css和template.css。页脚，它还会在jquery.js和main.js之前先加载\worstinme\uikit\Asset::register($this); first ，这是错误的。如果我将AppAsset::register($this);放在uikit.css之后，那么问题将会是相反的。

如何以这样的方式放置文件：首先加载uikit.js文件，然后在jquery.js 之后而不是之前加载main.js文件 {{1} }？

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

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

1 个答案: