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') }}" />
Related
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.
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') }}
I'm trying to use Assetic to include my base css and js assets that aren't in a bundle. They're located in MySymfonyApp/app/Resources/public/css/ and MySymfonyApp/app/Resources/public/js/.
I have the following in my base.html.twig template but i'm getting 404s
{% stylesheets '%kernel.root_dir%/Resources/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% javascripts
'%kernel.root_dir%/Resources/public/js/jQuery.js'
'%kernel.root_dir%/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
I've also tried the following with the same result.
{% stylesheets '../app/Resources/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
How do i reference assets that aren't in bundles?
solution:
assets in app/Resources/public/* are a special case. They can easily be managed.
These will all be copied (or symlinked) to web/public/* if you invoke the console command:
app/console assets:install web
... or ...
app/console assets:install web --symlink
Now the assets can be included from the web-folder directly.
<script src="{{ asset('js/jquery.js') }}"></script>
tip:
If you need to fetch assets from other directories relative to the kernel-rootdir.
You can do something like this:
# app/config/config.yml
assetic:
assets:
css_boostrap:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.min.css
- %kernel.root_dir%/../vendor/myself/bootstrap-theme/*.css
js_jquery:
inputs:
- %kernel.root_dir%/Resources/public/js/jquery.min.js
Now execute the console command ...
app/console assetic:dump
... and include them in one of your templates:
{% stylesheets '#css_boostrap' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
i didnt understand how assethic paths works..
{% block stylesheets %}
<link href="{{ asset('/bundles/dproc/css/base.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
My css and images are in /bundles/dproc/ directory. The code i showed below works, but i cant understand why should i use asset function, i can do it like this and get the same result
{% block stylesheets %}
<link href="/bundles/dproc/css/base.css" type="text/css" rel="stylesheet" />
{% endblock %}
So what does asset function? Or how should my path look like with asset function?
Because you probably shouldn't even use it like that. You should probably use Assetic with css like this:
{% block stylesheets %}
{% stylesheets
'/bundles/dproc/css/base.css' {# this will just get base.css #}
'/bundles/dproc/css/mycustomdir/* {# this will find all css files in that dir #}
%}
<link href="{{ asset_url }}" rel="stylesheet">
{% endstylesheets %}
{% endblock %}
By setting it up like this (with default config), in dev environment you will get exactly the same thing as if you just used <link .... > without assetic. But in production environment, your whole stylesheets assetic block will be merged into one file to reduce number of requests.
Later, you can set up some css and javascript minifiers and make them run in production environment. So, when you switch to production, you will have nice,economic css and javascript, while in dev invironment you will have exactly what you'd expect if you didn't use assetic at all.
Furthermore, if you use less or sass or something that needs to be precompiled, you could just include those files and tell assetic to recompile them automatically when they are changed.
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 %}