logo标签列表

Symfony 2.3 - 使用通过Composer安装的Twitter Bootstrap 3和LESS，作为供应商设置，无法访问Glyphicons字体。

csstwitter-bootstraplessasseticsymfony-2.3
11

我想在Symfony 2中使用Twitter Bootstrap，但不想使用bundles。我已经成功安装了MopaBootstrapBundle，但决定将其删除并使用纯净的Bootstrap。

设置

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$"

我为我的项目创建了一个新的bundle，名为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/，导致字体无法加载。所以我在浏览器控制台中看到这个错误：

在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上找到了许多问题和解决方案，但我仍然无法解决它。

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

2个回答
8

我已经很简单地解决了这个问题，现在我有点羞愧，甚至不好意思问。尽管如此，我相信这篇文章会帮助其他人更好地理解如何在Symfony 2中使用Twitter Bootstrap而不需要使用任何额外的bundle：

解决方案

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

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

所以，不要使用path：
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 过滤器时有效。

-2
1
LESS 工作得非常好。如上所述，问题在于 dev 环境中字体文件夹的路径。 - VMC
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接