Symfony 在 Assetic 输出中获取资产名称答案

【问题标题】：Symfony 在 Assetic 输出中获取资产名称
【发布时间】：2017-11-09 18:59:36
【问题描述】：

我用这样的代码生成我的文件：

{% block head_stylesheets %}
    {% stylesheets
        filter='?uglifycss'
        '@MyBundle/Resources/public/less/myfile.less'
    %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
    {% endstylesheets %}
{% endblock head_stylesheets %}

它转储一个像这样命名的文件：c543k540_myfile_1.css

此文件由资产名称后跟文件名组成：{assetName}_{filename}.css

如何自定义输出以将资产名称保留在输出中？

{% block head_stylesheets %}
    {% stylesheets
        output="css/mynewfilename.{assetName}.css"     // <--- Here
        filter='?uglifycss'
        '@MyBundle/Resources/public/less/myfile.less'
    %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
    {% endstylesheets %}
{% endblock head_stylesheets %}

更新澄清

我知道，如果我使用 name 选项，在 prod 中它将编译为 myouputname.css，但我希望在调试/开发环境中遵循以下代码，例如 myfile_myouputname_1.css

{% block head_stylesheets %}
    {% stylesheets
        name="myouputname"     // <--- Here
        filter='?uglifycss'
        '@MyBundle/Resources/public/less/myfile.less'
    %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
    {% endstylesheets %}
{% endblock head_stylesheets %}

感谢您的回复。

【问题讨论】：

假设你看过这里：symfony.com/doc/current/assetic/… 使用下面的第二个代码生成的输出是什么？
生成的输出是“mynewfilename.{assetName}.css”
您想要在输出中获得的文件名到底是什么？只是 c543k540.css ？在dev 环境中，该命令转储每个资产的块以及组合文件。您应该找到两个文件 c543k540_myfile_1.css 和 c543k540.css。如果您使用bin/console assetic:dump --env=prod --no-debug 转储prod 环境的资产，它应该只创建主文件*c543k540.css`。记得在转储到 prod 之前清除缓存。
所以澄清一下，如果您的资产包含name="foo" 和output="mynewfilename.{assetName}.css"，您需要一个名为mynewfilename.foo.css 的文件？
我建议你使用 webpack。做这种事情会容易得多symfony.com/doc/3.4/frontend.html

标签： php symfony twig assetic

【解决方案1】：

不再推荐使用 Assetic 来管理 Symfony 应用程序中的 Web 资产。相反，使用 Webpack Encore。 https://symfony.com/doc/current/frontend/assetic/index.html#dumping-asset-files

页面特定的 JavaScript 或 CSS（多个条目）在此处描述： https://symfony.com/doc/current/frontend/encore/simple-example.html#multiple-javascript-entries

// webpack.config.js
Encore
    // ... general CSS file here...
    .addStyleEntry('some_page', './assets/css/assetName.css')
;

支持使用 addStyleEntry()，但不推荐。一个更好的选择是遵循上面的模式：使用 addEntry() 指向一个 JavaScript 文件，然后从里面获取所需的 CSS。

【讨论】：