在 yii2 中编译自定义 Bootstrap css 从更少

Question

我正在 Yii2 和 Composer 中开始一个新项目（在使用 YII 1 的几个项目之后）。

我与作曲家一起创建了一个新的"高级项目"。一切都很好，但是，我想知道自定义引导主题的最佳方法是什么？

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

那么：是否有可能以某种方式扩展作曲家下载的较少文件并仅编辑两个变量文件？

Answer 1

引导程序配置可以通过更改变量来完成。以下 BootstrapAsset 是原始 BootstrapAsset 的替换，它在当前目录中使用 bootstrap-variables.less 而不是原始变量。

namespace appassets;
use yiihelpersFileHelper;
use yiiwebAssetBundle;
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);
        }
    }
}

Answer 2

不确定我是否理解这个问题。为什么不创建一个自定义.css或自定义无文件，最后加载并覆盖所需的文件？另一种解决方案是扩展较少的文件 http://css-tricks.com/the-extend-concept/并使用扩展文件而不是普通文件。

Answer 3

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

为了更改一些引导属性（例如字段高度），我做了以下操作：

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

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

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

Answer 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 appassets;
use yiiwebAssetBundle;
/**
 * @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 = [
        'yiiwebYiiAsset',
        'yiibootstrapBootstrapAsset',
    ];
 --------------------------------------------------------------------
You can add it in your page by 
use appbasicwebcss;

Answer 5

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

一个很好的教程在这里找到