Как в yii2 отключить bootstrap и jquery
  • 2830

Как в yii2 отключить bootstrap и jquery или заменить на свой.

Автор: admin | 06 июня (Ср.) 2018г. в 21ч.56м.

В yii2 html фреймворк bootstrap 3 подключается по умолчанию, поэтому если нужен стандартный twitter bootstrap 3, то
можно пользоваться. Но что, если нужна кастомная версия бутстрапа, например, когда сетка будет не 12
колонок, а 24 или что-то еще. Тогда нужно отключить тот фреймворк что есть и подключить свой.

Как заменить скрипты и стили, подключаемые yii2.

В конфигурации приложения main.php или web.php добавляем или редактируем assetManager.
'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\bootstrap\BootstrapAsset' => [
                'css' => [],
            ],
            'yii\bootstrap\BootstrapPluginAsset' => [
                'js'=>[]
            ],
        ],
    ],
],​

Тут отключается как css так и js файлы bootstrap.
Так можно отключить и jQuery:

'assetManager' => [
    'bundles' => [
        'yii\web\JqueryAsset' => [
            'js'=>[]
        ],
    ],
],

Если нужно подгрузить jquery с cdn:

'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'sourcePath' => null,   // do not publish the bundle
                    'js' => [
                        '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
                    ]
                ],
            ],
        ],
    ]


Также можно отключить (закомментировать) эти файлы в assets/AppAsset.php:

<?php

namespace frontend\assets;

use yii;
use yii\web\AssetBundle;

/**
 * Main frontend application asset bundle.
 */
class AppAsset extends AssetBundle
{

public $depends = [
   //'yii\web\YiiAsset',              
   //'yii\bootstrap\BootstrapAsset',  
];

Или тут же в методе init добавить код, по типу того, что в конфиге:

public function init()
{
    parent::init();
    
    // переустановка BootstrapAsset чтобы не грузились собственные стили
    \Yii::$app->assetManager->bundles['yii\\bootstrap\\BootstrapAsset'] = [
        'css' => [],
        'js' => []
    ];
}

Ну и добавляем свои файлы стилей так:

class AppAsset extends AssetBundle
{    
    public $basePath = '@webroot';
    public $baseUrl = '@web';    
    public $css = ['css/my_bootstrap.css'];
    public $js = ['js/my_bootstrap.js'];

В AppAsset могут быть и другие стили и скрипты кроме bootstrap. B они могут зависеть от него, то есть
должны будут подключаться после бутстрап. Поэтому удобно создать для стилей bootstrap отдельный Asset
и подключать его как зависимость для других пакетов стилей и скриптов.

namespace frontend\assets;

use yii;
use yii\web\AssetBundle;

class MyBootstrapAsset extends AssetBundle
{    
    public $basePath = '@webroot';
    public $baseUrl = '@web';    
    public $css = ['css/my_bootstrap.css'];
    public $js = ['js/my_bootstrap.js']; 

А в AppAsset подключаем так:

public $depends = [
   frontend\assets\MyBootstrapAsset,  
]; 

Можно этот ассет создать в конфигурации:

'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => false,
                'yii\bootstrap\BootstrapPluginAsset' => false,
                'yii\bootstrap\BootstrapAsset' => false,
                'frontend\assets\MyBootstrapAsset' => [
                    'css' => ['css/my_bootstrap.css'],
                    'js' => [
                        //тут подгружаем jquery из хранилища гугла
                        '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
                        'js/my_bootstrap.js'
                        ],
                ],
                
            ],
        ],    

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.