Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Compiling Bootstrap 3 in a Symfony 2 project on Windows

Compiling Bootstrap 3 in a Symfony 2 project on Windows

Problem

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' %}
    
{% 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?

Problem courtesy of: Jean-François Beauchef

Solution

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



    
        {% block title %}Welcome!{% endblock %}

        {% block stylesheets %}

            {% stylesheets '@bootstrap_less' combine=true %}
                
            {% endstylesheets %}

        {% endblock %}

        
        {% block body %}{% endblock %}

        {% block javascripts %}

            {% javascripts '@jquery_js' '@bootstrap_js' filter='?yui_js' combine=true %}
                
            {% endjavascripts %}

        {% endblock %}
    

Somehow cssembed unnecessary or does not function properly and can be removed with this solution!

Solution courtesy of: stwe

Discussion

View additional discussion.



This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Compiling Bootstrap 3 in a Symfony 2 project on Windows

×

Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription

×