2014-09-04 81 views
4

我想建立一个网站,我正在共享主机和所有工作正常但FontAwesome图标,因为Symfony没有找到他们应该在哪里。我按照这个步骤来移动网站制作共享主机:Fontawesome字体失败后资产:安装和资产:转储

  • 发布资产作为硬拷贝,因为SH不允许符号链接,所以我运行此命令assets:install
  • 通过运行这个命令发布由Assetic处理资产: assetic:dump(DEV)和assetic:dump --env=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但有我周围的第二个疑虑。

可以给我一个帮助吗?我stucked

安装SpBowerBundle + FkrCssURLRewriteBundle

我已经安装并配置了捆绑,但即使以后我仍然有在这种情况下与图像有关的问题,只是在选择二库。

这是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" 

为什么?

残疾人Assetic在SpBowerBundle

我在SpBowerBundle禁用assetic在/app/config/config.yml

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

由于我使用assetic也SpBowerBundle处理库的依赖关系,然后我重写CSS/JS块在base.html.twig如下:

{% 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 --symlinkassetic:dumpassetic: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管理仍然没有显示,请参阅附加图像:

enter image description here

我在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:warmuprm -rf /var/cache & rm -rf /var/logs以防万一
  • From Symofony2 shell :assets:install --symlink & assetic:dump & assetic:dump --env=prod

结果:DEV一切都很好,在PROD都是错

+0

如果您不使用默认的'web'路径,请尝试'app/console assets:install path'。 – 2014-09-04 15:20:25

+0

@ Mr.Smith我正在使用默认网络路径 – ReynierPM 2014-09-04 15:26:34

+0

您可以请您发布您的树枝模板的一部分,您定义这些资产并创建链接标签以包含它们 – 2014-09-04 15:32:04

回答

4

这是一个非常不幸的错误在assetic的结果。有关更多详细信息,请参阅this github说明。

的解决方案,我已经解决的是使用https://github.com/fkrauthan/FkrCssURLRewriteBundle

这是许多我曾经试过在任何情况下工作的唯一方法。

+0

有一个问题,我应该重写从''bundles/template/css/bootstrap.min.css''到''@ TemplateBundle/Resources/public/css/bootstrap.min.css''的路线吗?我应该使用缩小版还是普通版?如果我喜欢用bower和[this] [https://github.com/Spea/SpBowerBundle]捆绑软件处理资产,那该怎么办? – ReynierPM 2014-09-04 16:10:00

+0

@ReynierPM在这种情况下使用替代语法可能解决您的问题,但它并不总是工作。 'FkrCssURLRewriteBundle'。 我已经完美地将SpBowerBundle与FkrCssURLRewriteBundle结合使用。 – 2014-09-04 16:14:05

+0

那么你有什么建议围绕语法遵循?我拥有的还是您在捆绑文档上使用的那个? – ReynierPM 2014-09-04 16:15:16

1

实际上,这是非常合乎逻辑的,在开发环境中,它的工作原理是资源创建尽可能多的文件有资源。

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

问题是,在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 %} 
+0

你说得对,我的问题是固定在'dev',但是在'prod'中,我该如何解决这个问题? – ReynierPM 2014-09-05 12:36:55

+0

谢谢,这解决了问题在产品水平 – ReynierPM 2014-09-05 17:56:51

+0

我强硬的问题已修复,但不要,我不知道还有什么要做。看看[这里](http://tanane.com/tanane/web/app_dev.php/order/natural)这是'dev'和相同的[here](http://tanane.com/tanane/web/order/natural),但在'prod'中,还有另外一个想法给你? – ReynierPM 2014-09-06 18:41:07

0

我一直在处理这一段时间,并提出了一个新的解决方案。提高@ lenybernard的答案有点,这里是我的解决方案:

由于@import不位于font-awesome-min.css文件,它不适用于我的情况。我使用的是一个主题,发现与该主题相关的样式表具有导入注释。另外,这个主题需要Bootstrap在它自己的CSS文件之前加载,所以将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' 
0

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

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

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

有效地州的服务从任何文件。只要扩展名是.js或.css',就可以使用css或js文件夹。我不得不修改它

重写规则^ /(CSS | JS |字体)。/.* \ W * - [L]

允许字体文件夹和任何扩展。如果没有这个Symfony和Ez Publish尝试将网址路由到动态内容。

3

我有同样的问题,这是工作

我使用https://github.com/fkrauthan/FkrCssURLRewriteBundle然后在#应用程序 /配置/ 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