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.
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.
Related
I am including js files in this way below but seems nothing is included and I don't have errors.
{% javascripts 'web/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
The path is applicationName/web/js
Following the best practice on Symfony documentation I solved in this way :
{% stylesheets 'assets/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
where the folder assets/css is in Symfony web folder.
I'm trying to use:
{% stylesheets '#Bundle/Resources/public/css/style.css' filter='rename_filter' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
After running assets:install the reference to the css file has change to /css/40ae858_style_1.css. Is there any way to use the original reference? At least when env=dev.
I'm not using assetic:dump while developing but will be using it on the production server.
Your nearly there please use.
{% stylesheets 'bundles/yourbundlename/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Direct access
{{ asset('/bundles/yourbundlename/css/thefilename.css') }}
Is there any ways, to merge all *.css files for example, from many layouts in one, using native Symfony Assitic Manager.
Example:
**base.html.twig**
{% block stylesheets %}
{% stylesheets filter='cssrewrite,uglifycss' output='css/compiled/main.css'
'bundles/sscore/bootstrap/css/bootstrap.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
**index.html.twig extends base.html.twig**
{% block stylesheets %}
{{ parent() }}
{% stylesheets filter='cssrewrite,uglifycss' output='css/compiled/main.css'
'bundles/sscore/main.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
In prod env this example gives me two files, but i want one meged?
I don't think Assetic does what you are wanting it to do.
I think the easiest way to get those into the one file would be to just include the parent file in your stylesheets list and override the parent block like..
**index.html.twig extends base.html.twig**
{% block stylesheets %}
{% stylesheets filter='cssrewrite,uglifycss' output='css/compiled/main.css'
'bundles/sscore/bootstrap/css/bootstrap.css'
'bundles/sscore/main.css'
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
you can use scssphp , but you will need to install (scssphp) for that.
{% stylesheets filter="scssphp" output="styles/css/default_g.css"
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"
"styles/css/myfileone.css"
"styles/css/myfileone2.css"
"styles/css/main.css"
"styles/css/myfile.css"
%}
<link rel="stylesheet" href="{{ asset('styles/css/default_g.css') }}" />
{% endstylesheets %}
I am using symfony2 for my application I am making my all js and css files in one file using the following code
{% block stylesheets %}
{% stylesheets
'updated/lib/bootstrap-datepicker/css/datepicker3.css'
'updated/lib/prism/prism_default.css'
'updated/lib/select2/select2.css'
'updated/css/style.css'
output='css/complete-registration.css'
filter='cssrewrite'
filter='yui_css'
%}
{% endstylesheets %}
<link rel="stylesheet" href="{{ asset('css/complete-registration.css') }}" />
It works fine for me but problem is during my development whenever i change any thing on my js and css file I have to generate assets again which takes too much time so anyone can suggest me any thing.
what I do that i dont have to generate assets in my development environment ?
Read doc: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#dumping-asset-files-in-the-dev-environment
and then set
# app/config/config_dev.yml
assetic:
use_controller: false
and this prevents you from dumping files every change you made:
$ php app/console assetic:dump --watch
{% if app.environment == 'dev' %}
<!-- your styles -->
<link rel="stylesheet" type="text/css" href="..." />
{% else %}
{% stylesheets
'updated/lib/bootstrap-datepicker/css/datepicker3.css'
'updated/lib/prism/prism_default.css'
'updated/lib/select2/select2.css'
'updated/css/style.css'
output='css/complete-registration.css'
filter='cssrewrite'
filter='yui_css'
%}
{% endstylesheets %}
{% endif %}
<link rel="stylesheet" href="{{ asset('css/complete-registration.css') }}" />
I want to embed different Stylesheet files with assetic in a twig template of a Symfony2 project. The used stylesheet depends on the theme setting of the user.
I used
{% stylesheets
'#CuteFlowCoreBundle/Resources/public/css/application.css'
'#CuteFlowCoreBundle/Resources/public/css/theme/'~app.session.get('cuteflow_theme')~'/application.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}
But this throws an error:
Unexpected token "operator" of value "~" in "CoreBundle::layout.html.twig"
I tried the following too. But this didn't help either.
{% set theme = '#CuteFlowCoreBundle/Resources/public/css/theme/'~app.session.get('cuteflow_theme')~'/application.css' %}
{% stylesheets
'#CuteFlowCoreBundle/Resources/public/css/application.css'
theme
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}
Any ideas how this can be done?
The answer is simple : you cannot do it.
Assetic will iterate your templates and generate every files from {% stylesheets %} blocks.
If you use a variable (session for example), Assetic cannot "guess" all possible values.
You have 2 possibilities :
Separate 2 CSS calls (1 for common call, 1 for dedicated theme CSS) - makes more sense to me
Create 1 CSS per theme
Separate 2 CSS calls
{% stylesheets "A.css" "B.css" %} ... {% endstylesheets %}
<link rel="stylesheet" href="{{ asset("css/" ~ theme ~ ".css") }}" />
Create 1 CSS per theme
If you want to create one theme for each available theme, for keeping it simple, you have to do it manually :
{% if theme == "XXX" %}
{%stylesheets "A.css" "XXX.css" %} ... {% endstylesheets %}
{% elseif theme == "YYY" %}
{%stylesheets "A.css" "YYY.css" %} ... {% endstylesheets %}
{% endif %}