Yii2: Bootstrap css asset is always loaded?

[docsolver]

I have my own CSS file, which I compile using less and which contains all the bootstrap code. Thus, I do not want to include the default bootstrap.css

I succeeded in registering my own CSS file in the \backend\assets\AppAsset.php file.

However, I also commented out the line that includes yii\bootstrap\BootstrapAsset as an item in the $depends array, and it keeps being included.

The only way I'm able to disable it, is by modifying the $css array in the yii-bootstrap vendor directory, but this is obviously not a good solution.

Any thoughts on this?

[qiangxue]

Perhaps you used some bootstrap widget, such as NavBar in your layout?

[docsolver]

@qiangxue Yes, I do, but my own css contains code to style it. I'm worried about mobile performance, so I want to keep the number of HTTP requests and download size to a minimum.

It seems logical to me that the Bootstrap css should only be loaded if I include it in the AppAssets.

[cebe]

I have done the same, using bootstrap less sources. I just configured Assetmanager::bundles so that bootstrap asset does not load any case file.

[docsolver]

@cebe Can you show me an example of your code?

[qiangxue]

@cebe you are faster. :)

Yes, just follow what @cebe suggested. The bootstrap css is injected because you used Bootstrap widgets.

[docsolver]

@qiangxue @cebe I assume you are talking about Yii::$app->assetManager->bundles or am I mistaken?
When I overwrite this array (with an empty array) in my config file (and trace it to check if it is truly empty), the asset is still loaded in the HTML header:

I'm probably forgetting something, but please paste an example of your solution. It will help not only me, but also anyone else searching for clues :-)

[qiangxue]

try this:

'bundles' => [
    'yii\bootstrap\BootstrapAsset' => [
       'css' => [],
    ]
]

[docsolver]

@qiangxue thank you, you guys are wonderful.

[makroxyz]

@qiangxue
I did it in my backend/config/main.php file and works fine.
My AppAsset loads my bootstrap.css and renderAjax works fine too.

But when I call gii module bootstrap css is missing because of the above config
Is there a simple way to solve?

[cebe]

You may override bootstrap asset in your AppAsset::init() to have the changes only applied when your asset is loaded.

[cebe]

like this:

class AppAsset extends AssetBundle
{
    // ...
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];

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

[makroxyz]

@cebe
I've already tried that way. But I have a little problem.
I have an extension that provides bootstrap Modal and an Action. When button is clicked it opens the Modal and fires a jquery load calling a route to Action (configured in actions() in my app controller)... Action returns the modal-body by renderAjax call.
With your suggesion the action reloads bootstrap.css

[cebe]

Yeah, right... need to check whether we can improve this somehow...

[makroxyz]

Thank you @cebe

[qiangxue]

It seems gii and debug modules should reset AssetManager::bundles.

[cebe]

agree.

[makroxyz]

I did another try.

'assetManager' => [
            'bundles' => [
                'yii\bootstrap\BootstrapAsset' => [
                    'basePath' => '@webroot',
                    'baseUrl' => '@web',
                    'css' => ['css/bootstrap.css']
                ],
            ],
        ],

now it always loads my css bootstrap, gii too.
renderAjax also reloads this css, but I have an issue since I have a custom.css file which modifies bootstrap settings a bit. When renderAjax reloads bootstrap.css it replaces all styles on page without (of course) custom.css...
Is it possibile to tell renderAjax to avoid to register an AssetBundle?

[mikehaertl]

I don't think this is fixed. I have the same problem as #974. I want to use my custom Bootstrap built from the LESS sources, so I did as suggested above:

'bundles' => [
    'yii\bootstrap\BootstrapAsset' => [
       'css' => [],
    ]
]

Now the debug toolbar is broken as the yii\bootstrap\BootstrapAssets are blocked.

In my main layout I register the AppAsset which looks like this:

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $depends = [
        'app\assets\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];
}

And my custom BootstrapAsset is:

namespace app\assets;

use yii\web\AssetBundle;

class BootstrapAsset extends AssetBundle
{
    public $sourcePath = '@app/less';
    public $css = [
        'application/main.less',
    ];
}

As a workaround I've changed the namespace of my BootstrapAsset to yii\bootstrap and added this to my index.php:

Yii::$classMap['yii\bootstrap\BootstrapAsset'] = realpath(__DIR__.'/../assets/BootstrapAsset.php');

[cebe]

I don't think this is fixed.

the issues is still open ;)

[mikehaertl]

the issues is still open ;)

Oh, right, sorry. I was mislead by the link to #974.