Symfony 2.3 - 使用带有 LESS 的 Twitter Bootstrap 3，通过作曲家设置作为供应商安装

Question

我想在不使用捆绑包的情况下将Twitter Bootstrap与Symfony 2一起使用。我已经设法安装了MopaBootstrapBundle，但决定删除它并使用普通TB。

设置

作曲家.json

"require": {
    "twbs/bootstrap": "dev-master"
}

因此，使用 composer 安装后，路径[project_path]/vendor/twbs/bootstrap与以下内容相同：https://github.com/twbs/bootstrap

配置.yml

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ ]
    filters:
        cssrewrite: ~
        less:
            node: /usr/bin/nodejs 
            node_paths: [/usr/lib/nodejs:/usr/lib/node_modules]
            apply_to: ".less$"

我为我的项目AcmeDemoBundle创建了一个新捆绑包，并添加了[project_path]/src/Acme/DemoBundle/Resources/public/less文件夹，其中包含两个文件：

• variables.less - 我可以修改的[project_path]/vendor/twbs/bootstrap/less/variables.less副本，而不会影响原始TB的软件包
• style.less

风格.无内容：

@import "../../../../../../vendor/twbs/bootstrap/less/bootstrap.less";
@import "variables.less";
// any local changes should go below this line
[some local less code]

在base.html.twig

{% stylesheets '@AcmeDemoBundle/Resources/public/less/style.less' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

问题所在

一切都很好，直到我想使用包含在Twitter引导程序中的Glyphicons。

<span class="glyphicon glyphicon-search"></span>

Glyphicon 使用字体来表示图标，位于 Twitter Bootstrap 中：https://github.com/twbs/bootstrap/tree/master/fonts

为了使用它们，我必须创建以下符号链接。

[project_path]/web/fonts -> [project_path]/vendor/twbs/bootstrap/fonts/

在prod环境中，一切看起来都很棒（除了字体显示得有点脆），但在dev环境中，由于文件位置中存在/app_dev.php/字体不会加载。所以我在浏览器的控制台中收到此错误：

GET http://cmmp.localdev/app_dev.php/fonts/glyphicons-halflings-regular.woff 404 (Not Found) cmmp.localdev/app_dev.php/:1
GET http://cmmp.localdev/app_dev.php/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) /app_dev.php/fonts/glyphicons-halflings-regular.ttf:1
GET http://cmmp.localdev/app_dev.php/fonts/glyphicons-halflings-regular.svg 404 (Not Found) /app_dev.php/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular:1

使用 cssrewrite 筛选器只会将控制台中的错误更改为dev：

GET http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.woff 404 (Not Found) cmmp.localdev/:75
GET http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) cmmp.localdev/:75
GET http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.svg 404 (Not Found) cmmp.localdev/app_dev.php/:75

问题

我已经挣扎了几天了，尽管在StackExchange上发现了许多问题和解决方案，但我无法解决这个问题。

我错过了什么？我应该如何解决这个问题？

Answer 1

我修复了这个非常简单的问题，现在我甚至有点羞于问。虽然，我相信这篇文章将帮助其他人更好地理解如何在不使用任何额外捆绑包的情况下将Twitter Bootstrap与Symfony 2一起使用：

解决方案

我不得不将 Twitter Bootstrap 的变量@icon-font-path更改为：

// original value "../fonts/"
@icon-font-path: "../../../fonts/";

因此，而不是路径：

http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.woff

我已获得：

http://cmmp.localdev/fonts/glyphicons-halflings-regular.woff

这指向前面提到的符号链接：

[project_path]/web/fonts -> [project_path]/vendor/twbs/bootstrap/fonts/

注意：

这仅适用于cssrewrite过滤器。

Answer 2

可能对

你有用，尽量少用sudo安装。

http://blog.servergrove.com/2012/03/16/error-cannot-find-module-less-with-symfony2-assetic-and-twitter-bootstrap/