logo标签列表

如何在Symfony2中使用Assetic和Less来使用Twitter Bootstrap？

twitter-bootstrapsymfonylessassetic
4

我希望你能帮我翻译一下：我无法让 Twitter Bootstrap 正常工作。我知道有很多教程等等，但是没有一个对我有效...

我的 composer.json 文件内容如下：

"require":
    [...]
    "leafo/lessphp": "dev-master",
    "braincrafted/bootstrap-bundle": "dev-master",
    "twbs/bootstrap": "2.3.*"

我的 Assetic 配置如下:
# Assetic Configuration
assetic:
    filters:
        lessphp:
            file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
            apply_to: "\.less$"
        cssrewrite: ~
    assets:
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less
                - %kernel.root_dir%/../vendor/twbs/bootstrap/less/responsive.less
            filters:
                - lessphp
                - cssrewrite
            output: css/bootstrap.css
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-alert.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-button.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-carousel.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-collapse.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-dropdown.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-modal.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-tooltip.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-popover.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-scrollspy.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-tab.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-typeahead.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-affix.js
            output: js/bootstrap.js

最后是::base.html.twig文件：

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/bootstrap.js') }}"></script>
{% endblock %}

我正在尝试用不同的方式包含js和css文件，例如：
{% stylesheets '%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

或者

{% stylesheets '@bootstrap_css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

但它仍然无法工作，并且我在 bootstrap.css 和 bootstrap.js 上遇到 404 错误。
我的配置有什么问题？ 我正在使用 Windows 7 64位上的 Wamp 服务器。
唯一使其正常工作的方法是使用 cli 命令assetic:dump，但我认为在 dev 环境中这不是正确的方法。
我不是很确定，但似乎您需要调用assetic:dump命令来生成新的CSS和JS文件。它们必须合并在一起，以便您只有一个单独的文件。 - sensi
当我这样做时，它会生成许多js和css文件（实际上它们在assetic的“inputs”部分中列出），并且会造成一些混乱。我认为如果我正在使用assetic和less，那么只需调用<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">就足够了，因为它在assetic的“output”部分中定义，并且将生成bootstrap.css。 - zelazowy
它会创建很多文件，因为你是在开发环境下运行它，如果你运行命令“assetic:dump --env=prod”，你会注意到文件数量会减少。 - exepti0n
@exepti0n，@sensi 好的，但有一件事 - 我已经阅读了几篇教程，包括 Bootstrap 文档，但没有提到使用 assetic:dump（请参见http://bootstrap.braincrafted.com/getting-started），因此即使在运行此命令后它可以工作，我认为这不是正确的解决方案。 - zelazowy
你的网页文件夹中的文件是否生成正确？ - exepti0n
3个回答
5
最终我采用了 Bootstrap 的简单 js 和 css 文件，没有在 Symfony 中使用任何 bundle，因为这样更快，更容易，并且可能会有一些优点，比如任何更新 Bootstrap 将不会破坏我的网站（请参阅更新 Bootstrap 2 到 3...）。
感谢大家的答案，但这对我来说是最好的解决方案。
你是不是把Bootstrap CSS文件放在了/css目录下，并在{% stylesheets %}部分引用了它？你能发一下代码吗？我和你遇到的问题差不多，但我更倾向于利用Assetic的好处。 - crmpicco
是的，我只是将 css 和 js 文件复制到 web 中，并直接在模板中引用它。这很糟糕，但不幸的是那是我唯一的解决方案。但那是当我使用 Windows 时，可能与操作系统有关。 - zelazowy
我稍后会试一下，看看效果如何，但我很想让 lessphp 和 Assetic 与 Bootstrap 协同工作。 - crmpicco
是的，我想这是导入主题最简单的方法，但我仍然很想让它与LESS和Bootstrap一起工作。不过我可以确认这种简单的方法确实可行。 - crmpicco
0

尝试将以下内容添加到您的config_dev.yml文件中：

assetic:
    use_controller: true
我很确定这默认就是在 config_dev.yml中，我没有改过它。 - zelazowy
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接