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 %}
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 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') }}
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 hvae the css located in
app/Resources/FOSUserbundle/css
How can i include that in my twig template
The reason i am putting css there is that my all overridden FOSUser templates in in that folder. So i want to keep css , js images all in there so that if i need to use in other website i just copy that folder
I'm not quite sure how you would include that in your TWIG templates, but ...
1) I put the resources I use in several bundles / projects in the web/ directory. Then you can reference then like this:
{% stylesheets 'css/styles.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
2) If you need to override the FOSUserbundle anyway, you can put the resources inside the inheriting bundle, referencing them like this:
{% javascripts '#YourBundle/Resources/public/js/scripts.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
What you have done is perfectly all right.
Just do the following:-
$ app/console assets:install web
It will install the assets in the public "web" directory, where the assets should technically be, to be used with your Twig Templates.
Assets can then be used within Twig templates like this:-
{% block stylesheets %}
<link href="{{ asset('/css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('/js/main.js') }}" type="text/javascript"></script>
{% endblock %}
Although the question suggests and override case, it also aks for a case where the css or js are in a common folder, away from the bundle structure.
One answer is to use the available twig variables. For example if I have one css file located here
app/Resources/views/clientSite/customFolder/css/mycss.css
I can load in any template using something like this (note the example overrides the full stylesheets block, but not required, the stylesheet twig tag can be added in any block):
{% block stylesheets %}
{{ parent() }}
{% stylesheets '%kernel.root_dir%/Resources/views/clientSite/customFolder/css/mycss.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Also remember to execute the assetic:dump command, so symfony knows it had to publish the css to the web/css folder with all the other files.