在Symfony2中使用Assetic时,Twitter Bootstrap字形图标字体未找到。

4

我读了很多关于这个问题的帖子,但是在我的项目中无法解决。

基本上,我有一个Symfony2项目,其中包括Twitter Bootstrap(v3)。 开发模式下一切正常,但是当我尝试在生产模式下运行时,出现错误,说找不到Twitter Bootstrap字体:

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/

Twig文件:

{% 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目录之外。然而,在dev模式下它能够正常工作。
你有任何解决方法吗?
我会很感激的。

您能否试着将“fonts”目录移动到“css”目录中? - marian0
我已经尝试过那个了,但它没有起作用。 - Moumou
你尝试过仅删除“output”属性吗?(为了排除一些相对路径问题) - j-guyon
4个回答

12
如果您使用“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

应该将文件导出到Web文件夹内的fonts目录。

希望这有所帮助!


它确实有帮助...事实上,这是迄今为止唯一真正的解决方案,比我在其他任何地方找到的(糟糕的)解决方案都要好得多。我必须说,对于这个问题,assetic真的很糟糕,我希望这个奇怪的bug(是的,在我看来这是一个bug)有一天能够被纠正。 :/ - Denis Leger
只需添加以下内容: 如果在开发环境中工作,则无法在此处使用filter ='cssrewrite'。我需要将其删除才能使这个好的解决方案起作用。 - Denis Leger

0

您不必在Symfony/路径下搜索它们,实际上Symfony2的Web文件夹是web/,因此URL是相对于web/文件夹的。

顺便说一句,您需要使用以下命令:

php app/console assets:install

如果您想要符号链接,还可以将--symlink参数添加到您的命令中。
那么assets:install和assetic:dump之间有什么区别? assets:install会将所需资源符号链接或复制到“公共Web文件夹”。 assetic:dump将所有js仅合并为一个。

你好,感谢你的回答。不幸的是它没有起作用。正如我所说,我的最终CSS文件(main.css)在web/css/compiled中,字体在web/fonts中,但是CSS文件中字体的URL类似于(../../../fonts/file.ext)。 - Moumou
@kimimsc:你有收到任何错误吗?(请看我的更新,我已经移除了--env=prod) - DonCallisto
当我执行这些命令时,没有任何错误,但是当我访问网页时,会出现字体文件找不到的错误。 - Moumou
@kimimsc:你按照我的回答运行了命令吗?你应该从CLI上收到一些消息。 - DonCallisto
是的,只需基本信息说明安装资产的名称和位置。 - Moumou
显示剩余3条评论

0

正确的解决方案:

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

  • 我的config.yml和config_dev.yml看起来像这样,只有一个assetic部分-非常小心路径语法,否则您将收到此错误“在运行时发生错误:...错误:找不到模块'less'”许多人遇到了这3个错误消息,请谷歌此字符串以找出“在运行时发生错误:错误:找不到模块'less'”

assetic:

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/console assetic: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" 中,但是,当页面加载时,它会在 "http://localhost/" 中查找,正如您所看到的,这是我的开发设置问题。因此,我将文件夹字体 "C:\xampp\htdocs\phantom\web\fonts" 复制到 Web 根目录 "C:\xampp\htdocs\" 中,这样就解决了问题。

  • 在生产环境中,您的服务器 Web 根目录为 "C:\xampp\htdocs\phantom\web\",不会出现这种情况。我在一个生产服务器上进行了测试,无需手动将字体文件夹复制到 Web 根目录。

  • 此外,在项目目录中运行相同的命令 "php app/console assetic:dump",您将收到类似于 "FileError: '../bootstrap/less/bootstrap.less' wasn't found. Tried - ../bootstrap/less/bootstrap.less,C:\xampp\htdocs\phantom\vendor\mopa\bootstrap-bundle\Mopa\Bundle\BootstrapBundle\Resources\public\bootstrap" 的错误。同样,bootstrap 是通过 "php app/console assets:install" 安装在 "C:\xampp\htdocs\phantom\web\bootstrap" 中的,这不是正确的 Web 根目录,因此,为了解决这个临时问题,在开发中我只需将目录 "C:\xampp\htdocs\phantom\web\bootstrap" 复制到 "C:\xampp\htdocs\bootstrap" 中即可解决问题。再次运行您的命令,它将编译成漂亮、干净的 CSS。


看起来你忘记了例子 ;)。 - Tunaki

-1
也许你应该尝试保持Bootstrap文件夹结构不变(例如使用bower下载它)。顺便说一下,cssrewrite过滤器将解析你的CSS文件以反映字体的位置。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接