I'm working on Symfony 3.4 and Assetic.
Let's say my website is www.mycompany.com and i'm using 2 particular types of asset :
Google web font via #Import() in my main CSS file
Custom CSS fonts, with font files manually uploaded in in web/fonts/
When i visit my website in dev mode www.mycompany.com/app_dev.php/ :
Google fonts are well loaded and work.
Font awesome doesn't work (beacause app_dev.php/fonts/ is 404)
When i visit my website in prod mode www.mycompany.com/ :
Google fonts doesn't work (#import seems not to be loaded...)
Font awesome work (because css files are found in www.mycompany.com/fonts/)
Why this behavior ? For your information, i use Assetic this way to load myu assets :
{% stylesheets '#PimInterfaceBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
// Same for JS
Thanks.
When using the cssrewrite filter, don't refer to your CSS files using the #XxBundle syntax.
try this
{% stylesheets 'bundles/piminterface/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
here is doc
Including CSS Stylesheets
Fixing CSS Paths with the cssrewrite Filter
Dumping Asset Files in the prod Environment
if this is not working for you then try php bin/console asset:install
in prod php bin/console assetic:dump --env=prod --no-debug
`
Related
I have this doubt about URLs of assetics who I generated.
On the view, this was what I did:
{% block stylesheets %}
{% stylesheets
'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
'assets/vendor/font-awesome/css/font-awesome.min.css'
'assets/vendor/dist/css/*.css'
output = 'bundles/compiled/css/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% javascripts
'assets/vendor/jquery/dist/jquery.min.js'
'assets/vendor/bootstrap/dist/js/bootstrap.min.js'
'assets/vendor/dist/js/wow.min.js'
'assets/vendor/dist/js/slider.js'
'assets/vendor/dist/js/jquery.fancybox.js'
'assets/vendor/dist/js/owl.carousel.min.js'
'assets/vendor/dist/js/main.js'
'assets/vendor/dist/js/modernizr-2.6.2.min.js'
output = 'bundles/compiled/js/app.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
In dev environment, the app doesn't call these outputs links who assetic:dump generate, which is:
bundles/compiled/css/app.css
and
bundles/compiled/js/app.js/
both after /web folder.
In prod, I can't reach these locations. I get and 404 on
http://link.com/bundles/compiled/css/app.css for example.
So, how can I configure my config.yml for reach that path in prod environment?
This is what I have:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
**Edit:**I figured out the problem. My assetic's config was alright, the problem was in VirtualHosts file (modrewrite line, to be specific), which was only accepting ".php" extension files and web/ folder permissions.
That's the whole point of using AsseticBundle! When you are in prod mode, you need to dump the asset files. Have a look here.
php bin/console cache:clear --env=prod //clear the cache for prod environment
php bin/console assetic:dump --env=prod --no-debug
The result will be the concatenation of all your css stylesheets, in one single result file (bundles/compiled/css/app.css), and the concatenation of all your js scripts in one single result file (bundles/compiled/js/app.js), for the reason of reducing the requests to the server.
At this point, you won't be able to see, in the source of the page, all the css + js files, except those two from your compiled/ directory.
When you are in dev mode, the default behavior of AsseticBundle is to generate all your css + js files, for debugging purposes. That is, to help you debug your code easily. So at this point you will be able to see all you css+js files, but not the two files from compiled/ directory.
And pay attention, as cssrewrite must be a child of filters. See here the correction you need.
One of most asked questions and I didn't find answer.
How to list existed assets bundles.
How to make new assets bundle.
I had tried with
php app/console assets:install web --symlink
and
php app/console assets:install --symlink
In project I work currently, there is 4 bundles and using suggested /web folder for assets is not in option.
Also I had tried
asset('#Bundle/Resources/public/images/image.png')
I must notice that this '#Bundle/Resources/public/...' worked for calling assets in block
{% block stylesheets %}
{{ parent() }}
{% stylesheets
'#Bundle/Resources/public/css/some.css'
filter='cssrewrite' output='css/compiled.app.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" xmlns="http://www.w3.org/1999/html"/>
{% endstylesheets %}
{% endblock %}
but when tried "asset('...')" I got error undefined assets.
I just study this:
http://symfony.com/doc/current/assetic/asset_management.html
and solve problem with images using symfony image tag
{% image '#AppBundle/Resources/public/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example" />
{% endimage %}
Also assets bundles is founding in web/bundles folder after executing command assets:install --symlink
and there you can see lowercase asset bundle name in example AppTestBundle will be just apptest
I have a css file and an image in a bundle directory according these paths:
My_project
+-src
+-Project
+-MyBundle
+-Resources
+-public
+-css
+-MyCSSfile.css
+-images
+-MyImage.jpeg
In my view I call my css using assetic:
{% stylesheets 'bundles/myBundle/css/MyCSSfile.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
In my CSS I use:
background-image: url('../images/background.jpg');
Obviously it doens't work. The url which is returned by symfony is:
"http://localhost:8888/MY_Project/web/bundles/myBundle/css/bundles/myBundle/images/background.jpg".
Any idea? Please
In your case, maybe you should use :
php app/console assets:install
in order to copy or symlink assets in the web/bundles directory.
Try this
php bin/console assetic:dump
and try also to clear your cache
my question may seems really pointless or I may look like an idiot, but I'd like to use Zurb Foundation in Symfony2.
I saw a little number of topics about it, but never an real a clear explanation on how to integrate it properly in my project.
I saw an official bundle on packagist. I installed it so. But there is no documentation for using it with symfony2. For example, how to call my css and js files ? From the vendor folder directly ? How to use compass in my symfony project to use it ? Should I use bower directly ? (this seems to me less painfull) And if yes, if I have an already existing Symfony2 project, may I use bower in the root of my project ? in web folder ? anywhere else ?
I'm really lost and would be greatfull if someone could explain me or give me some resources to help me out.
Thanks
For my website I put all my JS/CSS files in vendor NameVendor
In my layout
{% javascripts
'http://code.jquery.com/jquery-2.1.0.min.js'
'#NameBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% stylesheets
'#NameBundle/Resources/public/css/*'
filter='cssrewrite' output='css/*.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
In script tag
$(document).ready(function(){
$(document).foundation();
});
In App/config/config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ NameBundle ]
filters:
cssrewrite: ~
I failed to use grunt to update my files so do it manually
https://github.com/florianbelhomme/FlobFoundationBundle
I think that's what you're looking for?
I have a CSS sprite sheet I'm trying to use, but my CSS file cannot 'see' the image. I've followed the answer provided here to no avail. My bundle structure is:
src/
vendor/
project/
bundle/
Resources/
public/
css/
normalize.css
static.css
images/
sprites.jpg
I've already done:
$ app/console assets:install
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for MajorProductions\SewingDiva\SiteBundle into web/bundles/majorproductionssewingdivasite
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution
and:
$ app/console assetic:dump
Dumping all dev assets.
Debug mode is on.
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_normalize_1.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_static_2.css
Not sure what else to do....
Solved it by changing the reference from:
{% block styles %}
{% stylesheets '#MajorProductionsSewingDivaSiteBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
to:
{% block styles %}
{% stylesheets 'bundles/majorproductionssewingdivasite/css/*' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Apparently the auto-magical reference in the first version is not the way to go, despite it being used in the official Symfony docs.
#KevinM1
Apparently the auto-magical reference in the first version is not the way to go, despite it > being used in the official Symfony docs.
It is here (in French, but equivalent doc for other languages certainly exists)
Well, from the documentation:
This is a key point: once you let Assetic handle your assets, the files are served from a different location. This can cause problems with CSS files that reference images by their relative path. However, this can be fixed by using the cssrewrite filter, which updates paths in CSS files to reflect their new location.
So you need to enable the cssrewrite filter:
# app/config/config.yml
assetic:
filters:
cssrewrite: ~
And use it in your stylesheets block:
{% stylesheets '#AcmeProjectBundle/Resources/css' filter='cssrewrite' %}
<link href="{{ asset_url }}">
{% endstylesheets %}