Compiling Bootstrap 3 in a Symfony 2 project on Windows - node.js

Question

I have been trying for some time now to compile Bootstrap 3 in a Symfony 2 project on Windows. But I can't get it to work. My primary objective is to compile my very own LESS file. I called it "styles.less". In there, I want to be able to use bootstrap mixins like "make-xs-column" for example. So I need to import bootstrap.less for that.
Here is what I did so far:
In my composer.json, I added the bootstrap bundle:
{
...
"require": {
...
"twitter/bootstrap": "v3.0.3"
},
....
}
Since I want to use Bootstrap 3, I cannot use the lessphp filter, so I use the less filter instead. For that, I had to install nodejs, and then less (by running the command "npm install less -g"). Finally, I modified my config.yml like so:
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$"
Now, in my layout.html.twig, I added the following:
{% stylesheets filter='less' '#JoePersonalWebSiteBundle/Resources/less/styles.less' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
And in my "styles.less" file, I import"bootstrap.less" like so:
#import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
But I always get an error. In fact, even if my "styles.less" file is completely empty, I always get an error like this one:
[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
I tried to create my own recess filter to use that instead of less (based on the work by boteeka found here). But that didn't work either. The less files never compile. Even an empty one, or a simple one.
Could someone please point me in the right direction? Is it possible on Windows, to compile Bootstrap 3 in a Symfony 2 project? If so, can someone give me the exact steps I should follow?

Answer 1

I use lessphp in windows with Bootstrap v3.0.0. The original idea is from http://mossco.co.uk/symfony-2/symfony-2-and-bootstrap-3-assetic-config-and-base-html-template-file/
I have also added to the entries for the fonts, icons.
My composer.json
"require": {
"components/jquery": "dev-master",
"leafo/lessphp": "v0.4.0",
"twbs/bootstrap": "v3.0.0",
},
For the config.yml copy 'cssembed' and 'yuicompressor' to '%kernel.root_dir%/Resources'
/java/
My 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"
And here my 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>
Somehow cssembed unnecessary or does not function properly and can be removed with this solution!