Publishing site.css last?

Yii 2.0 General Discussions
1

Hi,

Is it possible to configure Yii2 so that it is published last to the page? I would like to be able to override CSS settings from other assets without having to use !important.

Thanks in advance.

2

Utilize the depends feature, it will require and load the depended Assets prior to loading the current one.

Here is the doc link: http://www.yiiframework.com/doc-2.0/guide-structure-assets.html – At the top of the page, you see a code example of the default AppAsset. It requires ‘YiiAsset’ and ‘BootstrapAsset’ to be loaded first. So in the source, both would be loaded into the source prior to this ‘AppAsset’.

Edit ‘AppAsset’:




<?php


namespace app\assets;


use yii\web\AssetBundle;


class AppAsset extends AssetBundle

{

    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [

        'css/first-style.css',

    ];

    public $js = [

    ];

    public $depends = [

        'yii\web\YiiAsset',

        'yii\bootstrap\BootstrapAsset',

    ];

}

Notice, ‘site.css’ has been replaced with whichever stylesheets your wanting loaded first.

Then make another Asset Bundle, we will name ‘CustomAsset’:




<?php


namespace app\assets;


use yii\web\AssetBundle;


class CustomAsset extends AssetBundle

{

    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [

        'css/last-style.css',

    ];

    public $js = [

    ];

    public $depends = [

        'app\assets\AppAsset',

    ];

}

The 2nd Asset Bundle uses the stylesheet your wanting to load last, or to ‘override’ the CSS already loaded. It depends on the 1st AppAsset, so it will ensure it is loaded first. Notice, the depends array on the second example, only depends on ‘AppAsset’. It will load ‘AppAsset’, which then requires and depends on ‘YiiAsset’ and ‘BootstrapAsset’. Sort of a daisy chain effect, even though we didnt specify the ‘CustomAsset’ dependencies. You could also add ‘YiiAsset’ and ‘BootstrapAsset’ to the 2nd one, just to be thorough.

Don’t forget to call it in your layout:




use app\assets\CustomAsset;

CustomAsset::register($this);

–

As SamDark explains it easily: "So in order for your CSS from asset bundle A to be registered before CSS from asset bundle B you need to make sure that B depends on A." - source