在yii2中编译自定义引导程序css文件

Question

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

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

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

因此：是否可以扩展作曲家下载的较少文件并只编辑两个变量文件？

Answer 1

引导配置可以通过改变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); 
     } 
    } 
} 

Answer 2

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

要改变一些引导性（区高度例如）我做了以下内容：

1. 创建一个新的CSS文件具有改性：网\ CSS \引导-modified.css

2. 这个文件添加到资产\ AppAssets.php：

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

Answer 3

不知道我明白这个问题。你为什么不创建一个你最后加载的custom.css或custom.less文件，只是覆盖你所需要的？另一种解决方案是扩展较少的文件http://css-tricks.com/the-extend-concept/并使用扩展文件而不是普通文件。

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 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; 

Answer 5

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

一个很好的教程，发现here