0

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

  1. Is this the correct way to replace the Bootstrap 4 css file in Yii2?
  2. Is there a way to prevent the loading of [...]/css/bootstrap.css?
Davide
  • 175
  • 4
  • 12
  • you can remove from your $depends 'yii\bootstrap4\BootstrapAsset', but i think it remove also the js file – Sfili_81 Feb 21 '20 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 Feb 21 '20 at 13:23
  • 1
    Maybe this cah nelp you [https://stackoverflow.com/questions/26734385/yii2-disable-bootstrap-js-jquery-and-css](https://stackoverflow.com/questions/26734385/yii2-disable-bootstrap-js-jquery-and-css) – Sfili_81 Feb 21 '20 at 13:25
  • Does this answer your question? [Yii2 disable Bootstrap Js, JQuery and CSS](https://stackoverflow.com/questions/26734385/yii2-disable-bootstrap-js-jquery-and-css) – Sfili_81 Feb 21 '20 at 13:44
  • 1
    Yes it does, I put an extended explanation in an answer if that's ok. – Davide Feb 21 '20 at 13:52

1 Answers1

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">
Davide
  • 175
  • 4
  • 12