php - Fontawesome 字体在 Assets :install and assetic:dump 后失败

Question

我正在尝试建立一个我在共享主机上工作的网站，一切正常，但 FontAwesome 图标因为 Symfony 找不到它们应该在的位置。我按照以下步骤将网站移至生产共享主机:

• 将 Assets 发布为硬拷贝，因为 SH 不允许符号链接(symbolic link)，所以我运行此命令 assets:install
• 通过运行以下命令发布由 Assetic 处理的 Assets :assetic:dump (dev) 和 assetic:dump --env=prod (prod)

但它不起作用，因为我在 Firebug 中一直遇到此错误:

"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/img/mybg.png"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.woff?v=4.1.0"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.ttf?v=4.1.0"

在本地主机上，按照相同的步骤一切正常，所以我不知道是权限问题还是其他问题。

这就是我在 base.html.twig 中定义 Assets 的方式:

  {% block stylesheets %}
      {% stylesheets
              'bundles/template/css/bootstrap.min.css'
              'bundles/template/css/bootstrap-theme.min.css'
              'bundles/template/css/font-awesome.min.css'
              'bundles/template/css/select2.css'
              'bundles/template/css/select2-bootstrap.css'
              'bundles/template/css/bootstrapValidator.min.css'
              'bundles/template/css/datepicker.css'
              'bundles/template/css/datepicker3.css'
              'bundles/template/css/tanane.css'
         filter='cssrewrite'
      %}
      <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}
  {% endblock %}

我做了一个研究，发现了很多关于这个问题的主题，例如 this one我也找到了this interesting one但我对第二个有疑问。

有人可以帮我解决这个问题吗？我卡住了

已安装 SpBowerBundle + FkrCssURLRewriteBundle

我已经安装并配置了这两个包，但即便如此，在这种情况下我仍然遇到图像问题，只是在 Select2 库中。

这是 bower.json 文件内容:

{
    "name": "TemplateBundle",
    "dependencies": {
        "bootstrap": "latest",
        "bootstrap-datepicker": "latest",
        "bootstrap-growl": "latest",
        "bootstrapvalidator": "latest",
        "jquery": "1.11.*",
        "jquery-migrate": "latest",
        "pwstrength-bootstrap": "latest",
        "select2": "latest",
        "font-awesome": "latest"
    }
}

这是我添加到 /app/config/config.yml

的行

#FkrCssURLRewriteBundle 
fkr_css_url_rewrite:
    rewrite_only_if_file_exists: true
    clear_urls: true

# SpBowerBundle
sp_bower:
    install_on_warmup: true
    allow_root: true
    assetic:
        enabled: true
        nest_dependencies: false
        filters:
            packages:
                bootstrap:
                    css:
                        - css_url_rewrite
                font_awesome:
                    css:
                        - css_url_rewrite
    bundles:
        TemplateBundle: ~

这是我现在遇到的错误:

"NetworkError: 404 Not Found - http://tanane.dev/select2.png"
"NetworkError: 404 Not Found - http://tanane.dev/select2-spinner.gif"

为什么？

在 SpBowerBundle 中禁用 Assetic

我在 /app/config/config.yml 的 SpBowerBundle 中禁用了 assetic:

# SpBowerBundle
sp_bower:
    install_on_warmup: true
    allow_root: true
    bundles:
        TemplateBundle: ~

因为我使用 assetic 和 SpBowerBundle 来处理库依赖项，所以我重写了 base.html.twig 中的 CSS/JS block ，如下所示:

{% stylesheets
    'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
    'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
    'bundles/template/components/font-awesome/css/font-awesome.min.css'
    'bundles/template/components/select2/select2.css'
    'bundles/template/css/select2-bootstrap.css'
    'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
    'bundles/template/css/tanane.css'
   filter='css_url_rewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

然后我清除缓存并运行命令 assets:install --symlink、assetic:dump 和 assetic:dump --env=prod 仍然看不到图像和 FontAwesome 字体:

Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2-spinner.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.woff?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.ttf?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular

我还想念其他东西吗？为了解决这个恼人的问题，我还能做些什么？

修复禁用方式

我修复了我在 SpBowerBundle 配置中犯的一些错误，现在我有了这个:

sp_bower:
    install_on_warmup: true
    allow_root: true
    assetic:
        enabled: false
        nest_dependencies: false
    bundles:
        TemplateBundle: ~

但是由 SpBowerBundle 管理的图片仍然没有显示，请看附件图片:

我在我的 config.yml 中启用了 assetic:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:
      - FrontendBundle
      - BackendBundle
      - ProductBundle
      - CommonBundle
      - UserBundle
      - TemplateBundle

我应该禁用它并从那里删除所有这些包吗？

另一个测试

按照@lenybenard 的建议，我这样做了:

    {% block stylesheets %}
        {% stylesheets filter='css_url_rewrite'
            'bundles/template/components/font-awesome/css/font-awesome.min.css'
            'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
            'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
           filter='cssrewrite'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

        {% stylesheets
            'bundles/template/components/select2/select2.css'
            'bundles/template/css/select2-bootstrap.css'
            'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
            'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
            'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
            'bundles/template/css/tanane.css'
           filter='cssrewrite'
           filter='css_url_rewrite'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}

再次重复同样的过程:

• 清除缓存 cache:clear & cache:warmup 以及 rm -rf/var/cache & rm -rf/var/logs 以防万一
• 来自 Symofony2 shell:assets:install --symlink & assetic:dump & assetic:dump --env=prod

结果:在DEV中一切正常，在PROD中一切错误

Answer 1

这是 assetic 中一个相当不幸的错误的结果。参见 this github描述以获取更多详细信息。

我确定的解决方案是使用 https://github.com/fkrauthan/FkrCssURLRewriteBundle

这是我尝试过的许多方法中唯一适用于所有情况的方法。