CODEWITHSUNDEEP
phpsymfonytwigassetic
BENARD Patrick
BENARD Patrick

Reputation: 30975

Symfony get Asset Name in Assetic output

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.

Upvotes: 104

Views: 2817

Answers (1)

Eugene Kaurov
Eugene Kaurov

Reputation: 2981

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.

Upvotes: 1

Related Questions