在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