Share Assets between frontend and backend in Yii2

问题:

i've been trying to load a simple CSS (custom.css) from the frontend and backend of my project and I't has been a real pain.

The css is located in:

    frontend/views/web/css/custom.css

It loads without problems in the frontend... this is the AppAsset file located in the frontend:

<?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/site.css',
        'css/custom.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

So I just thought that the AppAsset file located in backend should look like this:

    <?php

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * Main backend application asset bundle.
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/custom.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

But all I get when loading the backend index is this:

http://localhost:8888/backend/web/css/custom.cssFailed to load resource: the server responded with a status of 404 (Not Found)

Sorry for the noob question and thanks in advanced. Just want to share a css between frontend and backend.

回答1:

One direct way to do this is to have a common web accessible folder under app root. Something like /assets, which you can access from both BackEnd and FrontEnd. You would need to edit your .htaccess to allow this as well.

Yii2 will publish assets only if $sourcePath is set, and $basePath and $baseUrl are not set(!)

Therefore:

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
   public $sourcePath = '@app/assets/app';

 public $css = [
   'css/openbook.css',
   'fontello/css/fontello.css',
   'fontello/css/animation.css'
 ];
 public $js = [
   'js/plug.openbook.js',
   'js/plug.interpret.js',
   'js/plug.drop.message.js'
 ];
 public $depends = [
   // 'yii\web\YiiAsset', 
   // 'yii\bootstrap\BootstrapAsset',
 ];
}

in the main layout:

use frontend\assets\AppAsset;
   ...
AppAsset::register($this);

回答2:

you can register the file on any view or layout itself

<?php $this->registerCssFile('http://domain.com/frontend/web/path/file.css');?>

or

you can also add the full path in asset bundle

public $css = [
    'http://domain.com/frontend/web/path/file.css',
];

回答3:

If you want to load a share resource i.e js or css , in YourAsset class sourcePath must be "@yourSource/web/", for example if you want to load a css file in frontend which is located in common/web/css/ directory , your AppAsset or any other custom asset class resides in common/ must have following variables initialize

public $sourcePath = "@common/web"; public $basePath ="@common";

Note : "@ewbroot" path & $baseUrl ="@web" will locate to your current accessing path, in this case it is frontend & will load it "localhost/yii-application/frontend/css/filename.css" so you must omit it.