4

我一直在尝试在 Windows 上的 Symfony 2 项目中编译 Bootstrap 3。但我无法让它工作。我的主要目标是编译我自己的 LESS 文件。我称之为“styles.less”。在那里，我希望能够使用诸如“make-xs-column”之类的引导混合。所以我需要为此导入 bootstrap.less 。

这是我到目前为止所做的：

在我的 composer.json 中，我添加了引导程序包：

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

由于我想使用 Bootstrap 3，我不能使用 lessphp 过滤器，所以我使用了 less 过滤器。为此，我必须安装 nodejs，然后再安装 less（通过运行命令“ 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:
&quot;C:\dev\nodejs\lessc.cmd&quot; &quot;C:\Users\joe\AppData\Local\Temp\assDE7E.tmp&quot;

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:
&quot;C:\dev\nodejs\lessc.cmd&quot; &quot;C:\Users\joe\AppData\Local\Temp\assDE7E.tmp&quot;

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 上是否可以在 Symfony 2 项目中编译 Bootstrap 3？如果是这样，有人可以给我我应该遵循的确切步骤吗？

4

1 回答 1

2

我在带有 Bootstrap v3.0.0 的 Windows 中使用 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%/Resources' /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>

不知何故 cssembed 不必要或无法正常运行，可以使用此解决方案删除！

于 2013-12-17T18:57:50.143 回答