在 Symfony2 上的 prod 中使用资产时找不到 Twitter Bootstrap glyphicons 字体

Question

我已经阅读了很多关于此的帖子，但无法使其适用于我的项目。

所以基本上我有一个 Symfony2 项目，其中包括 twitter bootstrap (v3)。在开发模式下一切正常，但是当我在 prod 模式下尝试时，我收到错误消息，提示找不到 twitter 引导字体：

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.woff   
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.ttf  
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

这是正常的，因为我在 Symfony/ 中没有 css/ 文件夹

项目的结构如下：

app/
src/
vendor/
web/
   css/
      compiled/
   fonts/
   js/

树枝文件：

{% block stylesheets %}
    {% stylesheets output="css/compiled/main.css" filter='cssrewrite'
        'css/bootstrap.min.css'
        'css/general.css'
        'css/navigation.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

我用过：

php app/console assetic:dump --env=prod

我检查了 bootstrap.min.css（在 web/css/compiled 中）文件（prod 和 dev），它们都具有相同的字体路径。类似于 (../../../fonts/fontName.ext)。

如果我们查看路径，它在 dev 模式和 prod 模式下都不应该工作，因为路径将 fonts/ 文件放在 web 目录之外。然而，它可以在开发模式下工作。

关于如何解决这个问题的任何想法？

我会很高兴的。

Answer 1

正确的解决方案：

• 安装 Nodejs，设置 symfony2 配置文件，它会自动将您选择的 cssrewrite 过滤器编译成 CSS。这将解决这些错误。

• 我的 config.yml 和 config_dev.yml 看起来像这只是一个资产部分 - 请非常小心路径语法，否则您将收到此错误“运行时发生错误：...错误：找不到module 'less'" 很多人遇到这 3 条错误消息 google 此字符串以找出“运行时发生错误：错误：找不到模块 'less'”

资产：

debug: '%kernel.debug%'
use_controller:
       enabled: '%kernel.debug%'
       profiler: true
filters:
    cssrewrite: ~
    ###is for linux path i am on windows for dev and linux for prod
    less:
        ###node: /usr/bin/nodejs
        ###node_paths: [/usr/lib/nodejs]
        node: "C:\\Program Files (x86)\\nodejs\\node.exe"
        node_paths: ["C:\\Users\\John\\AppData\\Roaming\\npm\\node_modules"]
        apply_to: "\.less$"

• 别忘了安装“npm install -g less”

• 在我的具体情况下：当执行“php app/consoleassetic:dump”时，我得到了同样的错误。这是因为我的 Windows 开发 Web 服务器是这样设置的：Web 根目录是“C:\xampp\htdocs\”，项目是这样的“C:\xampp\htdocs\phantom\”，而assetic:dump 放置了 glyphicons -halflings-regular.ttf、glyphicons-halflings-regular.woff 和 glyphicons-halflings-regular.woff2 在 "C:\xampp\htdocs\phantom\web\fonts" 但是，当页面加载时，它看起来在 "@987654321 @" 如您所见，这是我的开发设置的问题。所以我将文件夹字体“C:\xampp\htdocs\phantom\web\fonts”复制到网络根目录“C:\xampp\htdocs\”这样就解决了问题。

• 这不会发生在服务器 Web 根目录为“C:\xampp\htdocs\phantom\web\”的生产环境中。我在生产服务器上进行了测试，无需手动将字体文件夹复制到 webroot。

• 此外，在您的项目目录“php app/console assets:dump”中运行相同的命令时，您将收到类似“FileError: '../bootstrap/less/bootstrap.less' was not找到。试过 - ../bootstrap/less/bootstrap.less,C:\xampp\htdocs\phantom\vendor\mopa\bootstrap-bundle\Mopa\Bundle\BootstrapBundle\Resources\public\bootstrap" 同样的原因是 bootstrap由“C:\xampp\htdocs\phantom\web\bootstrap”中的“php app/console assets:install”安装，这不是正确的 webroot 目录，所以再次解决开发中的同样临时问题，我将复制目录“C: \xampp\htdocs\phantom\web\bootstrap" 到 "C:\xampp\htdocs\bootstrap" 解决问题。再次运行你的命令，它会干净利落地编译成 css。

Answer 2

如果你使用“cssrewrite”过滤器，它会重写字体文件的路径（到它们的原始来源），正如 Maxoo 已经说过的那样。

您可以通过以下方式为字体文件添加资产路径（以便将它们复制到 css/fonts/ 文件夹，css 文件将使用原始 ../fonts/ 路径找到它们）

我使用了以下解决方案：

config.yml：

assetic:
    debug:          %kernel.debug%
    use_controller: false
    assets:
        bootstrap_fonts_woff:
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.woff'
            output: fonts/glyphicons-halflings-regular.woff
        bootstrap_fonts_ttf:            
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.ttf'
            output: fonts/glyphicons-halflings-regular.ttf
        bootstrap_fonts_svg:
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.svg'
            output: fonts/glyphicons-halflings-regular.svg
        bootstrap_fonts_eot:
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.eot'
            output: fonts/glyphicons-halflings-regular.eot

然后调用

php app/console assetic:dump --env=prod

应该将文件导出到您的网络文件夹中的字体目录。

希望这会有所帮助！

Answer 3

也许你应该尽量保持 Bootstrap 文件夹结构不变（例如用 bower 下载它）。顺便说一句，cssrewrite 过滤器将解析您的 css 文件以反映字体的位置。

Answer 4

您不必在 Symfony/ 路径下搜索它们，事实上 Symfony2 网络文件夹是 web/ 所以 url 是“相对”到 web/ 文件夹。

顺便说一句，你必须使用以下命令

php app/console assets:install

如果您喜欢符号链接，您还可以在命令中添加 --symlink 参数

那么 assets:install 和 assets:dump 有什么区别呢？

assets:install 将链接或复制所需资源到“公共网络文件夹”

assetic:dump只会把所有的js合二为一