在 assets:install 和 assets:dump 之后，Fontawesome 字体失败答案

【问题标题】：Fontawesome fonts fail after assets:install and assetic:dump在 assets:install 和 assets:dump 之后，Fontawesome 字体失败
【发布时间】：2014-10-29 10:00:33
【问题描述】：

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

将资产发布为硬拷贝，因为 SH 不允许符号链接，所以我运行此命令 assets:install
通过运行以下命令发布由 Assetic 处理的资产：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 定义资产的方式：

  {% 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 中禁用资产

我在 /app/config/config.yml 的 SpBowerBundle 中禁用了资产：

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

由于我使用资产和 SpBowerBundle 来处理库依赖项，因此我在 base.html.twig 重写 CSS/JS 块，如下所示：

{% 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 外壳：assets:install --symlink & assetic:dump & assetic:dump --env=prod

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

【问题讨论】：

如果您不使用默认的web 路径，请尝试app/console assets:install path。
@Mr.Smith 我正在使用默认网络路径
能否请您发布您定义这些资产的树枝模板部分并创建链接标签以包含它们
@TomCorrigan 添加到主帖，看看
@TomCorrigan 你能看看我添加到主帖中的信息吗？我仍然有这方面的问题

标签： php css symfony assetic

【解决方案1】：

这是资产中一个相当不幸的错误的结果。有关详细信息，请参阅this github 描述。

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

这是我尝试过的众多方法中唯一适用于各种情况的方法。

【讨论】：

一个问题，我应该将路由从'bundles/template/css/bootstrap.min.css'重写为'@TemplateBundle/Resources/public/css/bootstrap.min.css'？我应该使用缩小版还是普通版？如果我喜欢使用 bower 和 [this][github.com/Spea/SpBowerBundle] bundle 来处理资产呢？
@ReynierPM 在这种情况下使用替代语法可能会解决您的问题，但它并不总是有效。 FkrCssURLRewriteBundle 可以。我完美地将 SpBowerBundle 与 FkrCssURLRewriteBundle 结合使用。
那么您对要遵循的语法有什么建议？是我拥有的还是您在捆绑文档中使用的？
我认为您现在遇到了问题，因为您还没有为 bower 包中的 select2 包配置 css_url_rewrite 过滤器。就我个人而言，我更喜欢禁用与 SpBowerBundle 的资产集成，只使用它来运行 bower 来安装资产。然后我像这样引用模板中的文件：bundles/namespace/components/select2/select2.css
我已经按照你的建议禁用了资产，但仍然出错，还有其他建议吗？

【解决方案2】：

我遇到了同样的问题，这个解决了

我使用https://github.com/fkrauthan/FkrCssURLRewriteBundle 然后在#app/config/config.yml 添加这个

font-awesome-otf:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
        output: 'fonts/FontAwesome.otf'
font-awesome-eot:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
        output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
        output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
        output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
        output: 'fonts/fontawesome-webfont.woff'

感谢：http://www.maraumax.fr

【讨论】：

【解决方案3】：

实际上，这是很合乎逻辑的，在开发环境中，它可以工作，因为assetic 创建的文件与资源一样多。

但是当您处于生产模式时，每个资产块通过连接所有资源文件将您的所有资源编译到一个文件中。

问题在于，在 css 中，@import 必须位于文件的顶部...而在 prod 中，您的字体真棒导入位于文件内，浏览器不会读取。

要解决您的问题，您可以这样做：

首先使用 @import 导入样式表：

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

然后，导入其余部分

{% stylesheets
    'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
    'bundles/template/components/bootstrap/dist/css/bootstrap-theme.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 %}

【讨论】：

你说得对，我的问题在dev 已解决，但在prod 仍要如何解决？
谢谢，解决了产品级别的问题
我很难解决问题，但没有解决，我不知道还能做什么。看看here 是dev 和相同的here 但在prod 中，你还有另一个想法吗？
你能看看我添加到主帖的信息吗？我仍然有这方面的问题

【解决方案4】：

我已经处理了一段时间，并想出了一个新的解决方案。稍微改进@lenybernard 的答案，这是我的解决方案：

由于@import 不在font-awesome-min.css 文件中，因此不适用于我的情况。我正在使用一个主题，发现与主题相关的样式表有导入注释。此外，主题要求在其自己的 CSS 文件之前加载 Bootstrap，因此将 theme.css 文件移动到列表顶部，或者如上一个答案中提到的那样将其分开完全破坏了主题。因此，最终的解决方案是找到带有@import 标签的行并将其放在资产列表中第一个文件的第一行，然后将其从引用的文件中删除。例如：

'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- if your @import is here
'bundles/foo/font-awesome.css'

...

'bundles/foo/bootstrap.css' <- put it here
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'

另一种解决方案是创建一个新的 CSS 文件并根据需要命名，将 @import 行放在此文件上，并将此文件放在列表顶部。例如：

'bundles/foo/font-awesome-fix.css' <- put @import here
'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'

【讨论】：

【解决方案5】：

我在尝试通过 Ez Publish 设置使用字体时遇到了类似的问题。字体正确地位于 web/font/ 目录中，并且 .less 被正确编译为指向该目录。然而，我在尝试拉取字体文件时遇到了 404 错误。

问题原来是错误配置的虚拟主机。配置文件有这一行：

重写规则 ^/(css|js)/.*\.(css|js) - [L]

这实际上表明“只要扩展名是 .js 或 .css，就可以提供 css 或 js 文件夹中的任何文件”。我不得不将其修改为

重写规则 ^/(css|js|font)/.*\.w* - [L]

允许字体文件夹和任何扩展名。没有这个 Symfony 和 Ez Publish 试图将 url 路由到动态内容。

【讨论】：