CODEWITHSUNDEEP
twitter-bootstrap-3yii2
Nickolay
Nickolay

Reputation: 45

Yii2 bootstrap 3 less issue

  1. Yii2 basic application new instance.
  2. Open start page page.
  3. Content div.container has styles from grid.less. grid.less:
.container {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}
  1. On page only bootstrap.css and js.

How to unlink less files from bootstrap?

screen shot:

enter image description here

Upvotes: 1

Views: 258

Answers (1)

rob006
rob006

Reputation: 22174

By default yii2-bootstrap does not do anything with .less files - it uses compiled CSS distributed in bower-asset/bootstrap package. If you want to adjust some CSS using .less, you need to create your own assets bundle with necessary modifications, configure compiling assets and override paths used by bootstrap assets:

return [
    'components' => [
        'assetManager' => [
            // setup asset converter for *.less files :
            'converter' => [
                'class' => 'yii\web\AssetConverter',
                'commands' => [
                    'less' => ['css', 'lessc {from} {to} --no-color'],
                ],
            ],
            // override bundles to use local project files :
            'bundles' => [
                'yii\bootstrap\BootstrapAsset' => [
                    'sourcePath' => '@app/assets/source/bootstrap',
                    'css' => [
                        'css/bootstrap.less'
                    ],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'sourcePath' => '@app/assets/source/bootstrap',
                ],
                'yii\bootstrap\BootstrapThemeAsset' => [
                    'sourcePath' => '@app/assets/source/bootstrap',
                ],
            ],
        ],
        // ...
    ],
    // ...
];

https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/guide/2.0/en/assets-setup#compiling-from-the-less-files

Regarding these .less files visible in browser inspector - these comes from .map files distributed with compiled assets: https://github.com/twbs/bootstrap/tree/v3.4.0/dist/css. These are only additional metadata loaded by browser if you open developer tools, they're not actually used as source for styles.

Upvotes: 1

Related Questions