Compiling custom Bootstrap css in yii2 from less

问题:

I'm starting a new project in Yii2 and Composer (after a few projects with YII 1).

I created a new "advanced project" with composer. Everything is okay but, I'm wondering what is the best way to customize the bootstrap theme?

I think copying the whole bootstrap less to the backend and to the frontend and edit the two variables file and compile it isn't the right way.

So: is it somehow possible to extend the less files downloaded by the composer and edit only the two variables file?

回答1:

Bootstrap configuration can be done by changing variables.less. The following BootstrapAsset is the replacement of original one, that uses bootstrap-variables.less in current directory instead of original variables.less.

namespace app\assets;

use yii\helpers\FileHelper;
use yii\web\AssetBundle;

class BootstrapAsset extends AssetBundle
{
    public $sourcePath = '@bower/bootstrap/dist';
    public $css = [
        'css/bootstrap.css',
    ];

    public function publish($am)
    {
        if ($this->sourcePath !== null && !isset($this->basePath, $this->baseUrl)) {
            list ($this->basePath, $this->baseUrl) = $am->publish($this->sourcePath, $this->publishOptions);
        }

        $src = \Yii::getAlias($this->sourcePath);

        FileHelper::copyDirectory("$src/../less", $this->basePath."/less");

        $vars = file_get_contents(__DIR__ . "/bootstrap-variables.less");
        $css = \Yii::$app->cache->get("bootstrap-css-".crc32($vars));
        if (!$css)
        {
            file_put_contents("$src/../less/variables.less", $vars);

            ini_set('xdebug.max_nesting_level', 200);

            $less = new \lessc();
            $less->setFormatter(YII_DEBUG ? "lessjs" : "compressed");
            unlink($this->basePath . "/css/bootstrap.css");
            $less->compileFile("$src/../less/bootstrap.less", $this->basePath . "/css/bootstrap.css");
            \Yii::$app->cache->set("bootstrap-css-".crc32($vars), file_get_contents($this->basePath . "/css/bootstrap.css"));
        }
        else
        {
            file_put_contents($this->basePath . "/css/bootstrap.css", $css);
        }
    }
}

回答2:

Not sure I understand the question. Why do you not create a custom.css or custom.less file that you load last and just overwrite what you need? Another solution would be to extend the less file http://css-tricks.com/the-extend-concept/ and use the extended file instead of the normal one.

回答3:

I am using the basic app.

To change some Bootstrap properties (field height for example) I did the following:

1. Create a new css-file with changed properties: web\css\bootstrap-modified.css

2. Add this file to assets\AppAssets.php:

public $css = [
    'css/site.css',
    'css/bootstrap-modified.css'
];

回答4:

In basic app..(yii2)../.    

First create your css in (in website folder)Basic->web->css->custom.css(Your CSS File)

After that if we want add new css to our site, go to (in website folder)Basic->assets and open              AppAsset.php.
and add 'custom.css' after 'css/site.css' like below.  
 -------------------------------------------------------     

<?php
namespace app\assets;
use yii\web\AssetBundle;
/**
 * @author Qiang Xue <[e-mail]>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/custom.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];

 --------------------------------------------------------------------

You can add it in your page by 

use app\basic\web\css;

回答5:

I didn't want to include another copy of Bootstrap, I wanted to customize it. So the answer is to load your customized copy of Bootstrap instead the base bootstrap.

A good tutorial is found here