Symfony 2.3 - 使用带有LESS的Twitter Bootstrap 3,通过作曲家设置作为供应商安装,无法访问Glyphicons字体

Question

我想在不使用bundle的情况下使用Twitter Bootstrap和Symfony 2.我已经设法安装MopaBootstrapBundle,但决定删除它并使用普通TB.

建立

composer.json

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

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

config.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

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 Bootstrap中包含的Glyphicons.

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

Glyphicons使用字体来表示图标,位于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过滤器.