从less开始编译yii2中的自定义Bootstrap css

时间:2014-11-20 17:04:05

标签: twitter-bootstrap less composer-php yii2

我正在Yii2和Composer开始一个新项目(在YII 1的几个项目之后)。

我用作曲家创建了一个新的“高级项目”。一切都还可以但是,我想知道什么是自定义引导主题的最佳方法?

我认为将整个bootstrap复制到后端和前端并编辑两个变量文件并编译它不是正确的方法。

那么:是否有可能扩展作曲家下载的较少文件并仅编辑两个变量文件?

5 个答案:

答案 0 :(得分:2)

Bootstrap配置可以通过更改variables.less来完成。 以下BootstrapAsset是原始的替换,它在当前目录中使用bootstrap-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);
        }
    }
}

答案 1 :(得分:1)

不确定我理解这个问题。为什么不创建最后加载的custom.css或custom.less文件,只是覆盖您需要的文件?另一种解决方案是扩展较少的文件http://css-tricks.com/the-extend-concept/并使用扩展文件而不是正常文件。

答案 2 :(得分:0)

我正在使用基本的应用程序。

要更改一些Bootstrap属性(例如字段高度),我执行了以下操作:

  1. 创建一个更改属性的新css文件: web \ css \ bootstrap-modified.css

  2. 将此文件添加到 assets \ AppAssets.php:

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

答案 3 :(得分:0)

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 <qiang.xue@gmail.com>
 * @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;

答案 4 :(得分:0)

我不想包含另一个Bootstrap副本,我想自定义它。所以答案是加载自定义的Bootstrap副本而不是基本引导程序。

找到了一个很好的教程here