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') }}
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.
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'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 %}