Symfony 2.3 - 使用带有 LESS 的 Twitter Bootstrap 3，通过 composer setup 作为供应商安装，无法访问 Glyphicons 字体

Posted 2023-02-19

【中文标题】Symfony 2.3 - 使用带有 LESS 的 Twitter Bootstrap 3，通过 composer setup 作为供应商安装，无法访问 Glyphicons 字体

【英文标题】：Symfony 2.3 - Using Twitter Bootstrap 3 with LESS, installed as a vendor through composer setup, unable to access Glyphicons fonts

【发布时间】：2013-09-23 03:34:58

【问题描述】：

我想在不使用捆绑软件的情况下将 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:
        cs-s-rewrite: ~
        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

使用cs-s-rewrite 过滤器只会将控制台中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 上找到了许多问题和解决方案，但我无法解决这个问题。

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

【参考方案1】：

可能对你有用，尽量少用sudo安装

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

【讨论】：

LESS 工作得很好。如上所述，问题在于dev 环境中字体文件夹的路径。

【参考方案2】：

我很简单地解决了这个问题，现在我什至连问都感到有点羞愧。不过，我相信这篇文章将帮助其他人更好地了解如何在不使用任何额外捆绑包的情况下将 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/

注意：

这仅使用cs-s-rewrite 过滤器有效。