在Windows上的Symfony 2項目中編譯Bootstrap 3

Question

我一直在嘗試一段時間來編譯Windows上的Symfony 2項目中的Bootstrap 3。但我無法讓它工作。我的主要目標是編譯我自己的LESS文件。我稱它爲「styles.less」。在那裏，我希望能夠使用像「make-xs-column」這樣的bootstrap mixins。所以我需要導入bootstrap.less。

這裏是我做過什麼至今：

在我composer.json，我添加了引導束：

{ 
    ... 
    "require": { 
     ... 
     "twitter/bootstrap": "v3.0.3" 
    }, 
    .... 
} 

因爲我想用引導3，我不能使用lessphp過濾器，所以我使用較少的過濾器來代替。爲此，我不得不安裝nodejs，然後減少（通過運行命令「npm install less -g」）。最後，我修改了config.yml像這樣：現在

assetic: 
    debug:   "%kernel.debug%" 
    use_controller: false 
    bundles:  [ JoePersonalWebSiteBundle ] 
    filters: 
     cssrewrite: ~ 
     less: 
      node: "C:\\dev\\nodejs\\lessc.cmd" 
      node_paths: 
       - "C:\\dev\\nodejs\\node_modules" 
      apply_to: "\.less$" 

，在我layout.html.twig，我增加了以下內容：

{% stylesheets filter='less' '@JoePersonalWebSiteBundle/Resources/less/styles.less' %} 
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}"> 
{% endstylesheets %}  

在我的 「styles.less」 的文件，我輸入「bootstrap.less」像這樣：

@import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less'; 

但我總是得到一個錯誤。事實上，即使我的「styles.less」文件完全是空的，我總是得到這樣的錯誤之一：

[exception] 500 | Internal Server Error | Assetic\Exception\FilterException 
[message] An error occurred while running: 
"C:\dev\nodejs\lessc.cmd" "C:\Users\joe\AppData\Local\Temp\assDE7E.tmp" 

Error Output: 
[31mParseError: missing opening `{`[39m[31m in [39mC:\Users\joe\AppData\Local\Temp\assDE7E.tmp[90m on line 17, column 1:[39m 
[90m16 });[39m 
17 [0m[0m 


[1] Assetic\Exception\FilterException: An error occurred while running: 
"C:\dev\nodejs\lessc.cmd" "C:\Users\joe\AppData\Local\Temp\assDE7E.tmp" 

Error Output: 
[31mParseError: missing opening `{`[39m[31m in [39mC:\Users\joe\AppData\Local\Temp\assDE7E.tmp[90m on line 17, column 1:[39m 
[90m16 });[39m 
17 [0m[0m 

我試圖創建自己的凹入過濾器來使用，而不是更少（基於由boteeka found here工作）。但是那也行不通。文件越少，永遠不會編譯。即使是空的，也可以是簡單的。

難道有人請指點我正確的方向嗎？是否可以在Windows上編譯Symfony 2項目中的Bootstrap 3？如果是這樣，有人可以給我我應該遵循的確切步驟嗎？

Answer 1

我在Bootstrap v3.0.0中使用lessphp。最初的想法是從http://mossco.co.uk/symfony-2/symfony-2-and-bootstrap-3-assetic-config-and-base-html-template-file/

我也添加到字體，圖標的條目。

我composer.json

"require": { 
    "components/jquery": "dev-master", 
    "leafo/lessphp": "v0.4.0", 
    "twbs/bootstrap": "v3.0.0", 
}, 

對於config.yml副本 'cssembed' 和 '的YUICompressor' 到 '％kernel.root_dir％/資源' /JAVA/

我config.yml

# Assetic Configuration 
assetic: 
    debug:   %kernel.debug% 
    use_controller: false 
    bundles:  [ ] 
    java: C:\Program Files\Java\jre7\bin\java.exe 
    filters: 
     cssrewrite: ~ 
     cssembed: 
      jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar 
     yui_js: 
      jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar 
     lessphp: 
      file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php 
      apply_to: "\.less$" 
    assets: 
     jquery_js: 
      inputs: 
       - "%kernel.root_dir%/../components/jquery/jquery.min.js" 
      filters: [?yui_js] 
     bootstrap_js: 
      inputs: 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/transition.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/alert.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/modal.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/dropdown.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/scrollspy.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tab.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tooltip.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/popover.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/button.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/collapse.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/carousel.js" 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/affix.js" 
      filters: [?yui_js] 
     bootstrap_less: 
      inputs: 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less" 
      filters: [lessphp, cssembed] 
     fonts_glyphicons_eot: 
      inputs: 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot" 
      output: "fonts/glyphicons-halflings-regular.eot" 
     fonts_glyphicons_svg: 
      inputs: 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg" 
      output: "fonts/glyphicons-halflings-regular.svg" 
     fonts_glyphicons_ttf: 
      inputs: 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.ttf" 
      output: "fonts/glyphicons-halflings-regular.ttf" 
     fonts_glyphicons_woff: 
      inputs: 
       - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff" 
      output: "fonts/glyphicons-halflings-regular.woff" 

在這裏，我base.html.twig

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>{% block title %}Welcome!{% endblock %}</title> 

     {% block stylesheets %} 

      {% stylesheets '@bootstrap_less' combine=true %} 
       <link href="{{ asset_url }}" type="text/css" rel="stylesheet"> 
      {% endstylesheets %} 

     {% endblock %} 

     <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> 
    </head> 
    <body> 
     {% block body %}{% endblock %} 

     {% block javascripts %} 

      {% javascripts '@jquery_js' '@bootstrap_js' filter='?yui_js' combine=true %} 
       <script src="{{ asset_url }}"></script> 
      {% endjavascripts %} 

     {% endblock %} 
    </body> 
</html> 

以某種方式c​​ssembed不必要或無法正常工作，可以通過此解決方案刪除！