Symfony 资产捆绑

Posted 2023-03-06

【中文标题】Symfony 资产捆绑

【英文标题】：Symfony Asset bundling

【发布时间】：2013-03-11 16:21:38

【问题描述】：

在 Symfony 2 中，我像这样使用资产捆绑。

% stylesheets
            'bootstrap/css/bootstrap.css'
            'bootstrap/flat/css/flat-ui.css'
            filter='cs-s-rewrite'
            filter='?yui_css'
%

它工作得很好，但是我的@font-face 资源没有加载。它们在开发环境中运行良好，但是一旦 css 在生产环境中捆绑到单个文件中，就会加载默认字体？

当我检查了相对路径是否正确更新为指向正确的区域时，cs-s-rewrite 工作正常，我什至尝试使用不起作用的绝对 URL。

我尝试过编译，但没有帮助。唯一有效的方法是将其从捆绑包中移除，然后直接加载。

symfony 资产捆绑和@font-face :S :S :S 是否存在某种错误

下面是@font-face 捆绑后在prod环境中的css。

@font-facefont-family:"Flat-UI-Icons-16";src:url("../bootstrap/flat/fonts/Flat-UI-Icons-16.eot");src:url("../bootstrap/flat/fonts/Flat-UI-Icons-16.eot?#iefix") 

【问题讨论】：

尝试在 CSS 中使用外部文件的绝对路径。就像/bundles/acmedemo/css/bootstrap/flat/fonts/Flat-UI-Icons-16.eot。应该在 dev 和 prod 环境中工作。

【参考方案1】：

有一些关于URL in CSS files in this *** page的好信息。

其中一个响应指出 CSS 文件中的相对 URL 是相对于文件所在目录的。

如果你的字体是从

加载的

bootstrap/css/bootstrap.css

CSS 中的 URL 类似于以下相对 URL：

../bootstrap/flat/fonts/Flat-UI-Icons-16.eot

这意味着浏览器将尝试获取以下字体

bootstrap/bootstrap/flat/fonts/Flat-UI-Icons-16.eot

您可能想尝试以下 URL 样式

../../bootstrap/flat/fonts/Flat-UI-Icons-16.eot

或者

../flat/fonts/Flat-UI-Icons-16.eot

我强烈推荐documentation about fixing css path with cs-s-rewrite filter。

请注意，如果您使用 cs-s-rewrite 过滤器，则不能使用 @YourAwesomeBundle 语法。

希望这能解决您的问题