資產后，Fontawesome字體失敗：install和assetic：dump

Question

我正在嘗試建立一個我在共享主機上工作的網站，所有工作都很好，但是自Symfony以來FontAwesome圖標找不到它們應該在哪里。 我按照這個步驟將網站移動到生產共享主機：

• 將資產發布為硬拷貝，因為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"

在localhost，按照相同的步驟，一切正常，所以我不知道是否是權限問題或其他問題。

這就是我在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 %}

我做了一個研究，並發現了很多關於這個問題的主題，例如這個我也發現了這個有趣的一個，但我對第二個問題有疑慮。

有人能給我一個幫助嗎？ 我被困了

已安裝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中的/app/config/config.yml ：

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

由於我正在使用assetic和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管理的SpBowerBundle仍未顯示，請參閱附圖：

我在assetic啟用了config.yml ：

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

這是資產中一個相當不幸的錯誤的結果。 有關更多詳細信息，請參閱此github說明。

我已經解決的解決方案是使用https://github.com/fkrauthan/FkrCssURLRewriteBundle

這是我嘗試的許多方法中唯一適用於每種情況的方法。

Answer 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

Answer 3

實際上，這是非常合乎邏輯的，在開發環境中，它起作用，因為資產創建了盡可能多的文件資源。

但是當您處於生產模式時，每個資產塊都會通過連接所有資源文件來編譯單個文件中的所有資源。

問題是在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 %}

Answer 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'

Answer 5

嘗試使用帶有Ez Publish設置的字體時，我遇到了類似的問題。 字體正確地位於web / font /目錄中，並且.less被正確編譯為指向該目錄。 然而，在嘗試拉取字體文件時，我遇到了404錯誤。

問題原來是配置不正確的虛擬主機。 配置文件有這一行：

RewriteRule ^ /（css | js）/.* \\。（css | js） - [L]

只要擴展名是.js或.css'，它就會有效地聲明'從css或js文件夾中提供任何文件'。 我不得不修改它

RewriteRule ^ /（css | js | font）/.* \\ .w * - [L]

允許使用字體文件夾和任何擴展名。 沒有這個Symfony和Ez Publish就試圖將網址路由到動態內容。