Symfony get Asset Name in Assetic output

Question

I generate my file with code like this:

{% 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 %}

It dumps a file named like this: c543k540_myfile_1.css

This file is composed of the asset name followed by the filename: {assetName}_{filename}.css

How can I customize the output in keeping the asset name in the output?

{% 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 %}

---

Update to clarify

I know that if I use the name option, in prod it will compile to myouputname.css but what I would like to have in debug/dev environment is following the bellow code something like 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 %}

Thanks for your reply.

Conchoid

Assuming you have look here: symfony.com/doc/current/assetic/… What is the generated output using the second code below? – Portingale

The generated output is "mynewfilename.{assetName}.css" – Conchoid

what exactly is your desired filename to get in the output? Just c543k540.css ? In dev environement the command dumps the chunks for each asset and also the combined file. You should find two files c543k540_myfile_1.css and c543k540.css. If you dump the assets for prod environment with bin/console assetic:dump --env=prod --no-debug it should create only the main file *c543k540.css`. Remember to clear the cache before dumping in prod. – Mehalick

So to clarify, if your asset contains name="foo", and output="mynewfilename.{assetName}.css", you expect a file named mynewfilename.foo.css? – Gegenschein

output is what I've tried, but with no success, finally I just want to have {filename}_{name}.css in debug env instead of {name}_{filename}.css, actually I'm looking into this Assetic file github.com/kriswallsmith/assetic/blob/master/src/Assetic/… – Conchoid

I advise you to use webpack. It will be much easier to do this type of thing symfony.com/doc/3.4/frontend.html – Drub

@LeMenachFlorian Yes thanks for comment, It's an old question... I'm agree with you in your days... It's what I use now. – Conchoid

Excuse me, I did not pay attention to the date :) – Drub

Answer 1

Using Assetic to manage web assets in Symfony applications is no longer recommended. Instead, use Webpack Encore. https://symfony.com/doc/current/frontend/assetic/index.html#dumping-asset-files

Page-Specific JavaScript or CSS (Multiple Entries) is described here: 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')
;

Using addStyleEntry() is supported, but not recommended. A better option is to follow the pattern above: use addEntry() to point to a JavaScript file, then require the CSS needed from inside of that.

Dorsman