Compiling Bootstrap 3 in a Symfony 2 project on Windows

Question

I’ve been trying to compile Bootstrap 3 in a Symfony 2 project on Windows for some time now. But I can’t make it work. My main task is to build my own LESS file. I called it "styles.less". There I want to be able to use bootstrap mixes, for example, "make-xs-column". So I need to import bootstrap.less for this.

Here is what I have done so far:

In my composer.json, I added a bootstrap package:

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

Since I want to use Bootstrap 3, I cannot use a lessphp filter, so I use a less filter instead. To do this, I had to install nodejs, and then less (by running the " npm install less -g" command ). Finally, I changed my config.yml as follows:

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 ). . . , .

- ? Windows Bootstrap 3 Symfony 2? , - , ?

Answer 1

lessphp Bootstrap v3.0.0. http://mossco.co.uk/symfony-2/symfony-2-and-bootstrap-3-assetic-config-and-base-html-template-file/

, .

.json

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

config.yml 'cssembed' 'yuicompressor' '% 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"

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>

- cssembed !