Custom Bootstrap 4 css and asset management in Yii2 [duplicate]

Question

I've installed the yii2-bootstrap4 extension in yii2-advanced and I've added a customized css file (custom.css) re-compiling Bootstrap source with Sass.

Then I've added custom.css to frontend/web/css and I've modified frontend/assets/AppAsset.php as follows:

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/custom.css',
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap4\BootstrapAsset',
    ];
}

I obtained the result I wanted, but I noticed that the <head>...</head> of my pages contains the following:

<link href="/yii2-advanced/frontend/web/assets/1758a11a/css/bootstrap.css" rel="stylesheet">
<link href="/yii2-advanced/frontend/web/css/custom.css" rel="stylesheet">
<link href="/yii2-advanced/frontend/web/css/site.css" rel="stylesheet"></head>

And:

[...]/css/bootstrap.css contains the original Bootstrap 4 css
if I delete that first entry from the DOM (via Devtools) the web pages are not affected.

Questions

Is this the correct way to replace the Bootstrap 4 css file in Yii2?
Is there a way to prevent the loading of [...]/css/bootstrap.css?

you can remove from your $depends 'yii\bootstrap4\BootstrapAsset', but i think it remove also the js file — law_81
– law_81, Commented Feb 21, 2020 at 13:15
@Sfili_81 If I remove 'yii\bootstrap4\BootstrapAsset' the website stops working as expected. In that case, for some reason, the first entry in the head section is loaded last, so both custom.css and site.css get overridden. — Davide
– Davide, Commented Feb 21, 2020 at 13:23
Maybe this cah nelp you https://stackoverflow.com/questions/26734385/yii2-disable-bootstrap-js-jquery-and-css — law_81
– law_81, Commented Feb 21, 2020 at 13:25
Does this answer your question? Yii2 disable Bootstrap Js, JQuery and CSS — law_81
– law_81, Commented Feb 21, 2020 at 13:44
Yes it does, I put an extended explanation in an answer if that's ok. — Davide
– Davide, Commented Feb 21, 2020 at 13:52

Davide · Accepted Answer · 2020-02-21 13:53:23Z

1

Adapting one of the answers of this other question (suggested by @Sfili_81), I solved modifying frontend/assets/AppAsset.php as follows:

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/custom.css',
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap4\BootstrapAsset',
    ];

    public function init(){
        parent::init();
        // resetting BootstrapAsset to not load own css files
        \Yii::$app->assetManager->bundles['yii\\bootstrap4\\BootstrapAsset'] = [
            'css' => [],
            //'js' => []
        ];
    }
}

Now the css files included in the <head> section are only these ones:

<link href="/yii2-advanced/frontend/web/css/custom.css" rel="stylesheet">
<link href="/yii2-advanced/frontend/web/css/site.css" rel="stylesheet">

answered Feb 21, 2020 at 13:53

Davide

1854 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Omer Aslam Over a year ago

I would rather add these setting in the config.

Davide Over a year ago

In frontend/config/main.php? How?

Collectives™ on Stack Overflow

Custom Bootstrap 4 css and asset management in Yii2 [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related