In one of my Symfony projects I am using assetic for asset managment.
All my twig files extend a base file called base.html.twig. I This file (base) I have:
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'../vendor/bootstrap/css/bootstrap.css'
'css/general.css'
'css/navigation.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
In the other files that extend the base file I override the stylesheets block so that I can add other css files. This is what I do:
{% block stylesheets %}
{{ parent() }}
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'bundles/account/css/signup.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Now the problem is that signup.css is never added in main.css and so are all the other files that are not in the stylesheet block in the base file.
I don't know why but this started happening when I swtiched to prod environment (it was working fine in dev). I've done, as recommending on Symfony's website:
php app/console assetic:dump --env=prod --no-debug
One other thing, it seems that I can't swtich back to dev mode even when I'm using app_dev.php
Do you guys have any idea of where these errors could come from ?
Thank you in advance for you help,
kimimsc
Your have a conflict with your 'option' attribute. So in prod environnement, the second stylesheet overwrite the first.
You must use another output value for signup.css (or don't use this option)
Related
I have some troubles loadings my css sheets with Symfony.
I'm using this in app\Resources\views\base.html.twig to load ccs files in web\bundles\app\css :
{% block stylesheets %}
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Doing this throw an exception : "Unable to generate a URL for the named route "_assetic_2c8c367_0" as such route does not exist.") in base.html.twig at line 10
This works, css load and no exception thrown :
{% block stylesheets %}
<link rel="stylesheet" href="bundles/app/css/bootstrap.css">
{% endblock %}
Can someone help me understand why the first code dosn't works ? I haven't used Symfony since 6 month but I'm sure that's how I used to load css.
Here is the doc about it.
Try to empty your web/bundles folder first then run php app/console assets:install web/ --symlink and continued by php app/console assetic:dump
If the errors still occurs, try to recheck every css files included
I would like to use the parameters assets_version for my css and js files. It works well with them when I use {{ asset(bla/bla/file.css) }} but not when I use Assetic.
In this later case, assets_version just doesn't show.
I made the commande php app/console assetic:dump but it still doesn't show...
If anyone could help me on this.
Thank you
Basically my problem was that I wasn't using the function asset.
I had that:
{% stylesheets
'bundles/webapp/css/funCommon.css'
'bundles/webapp/css/funMobile.css
filter='?yui_css'
%}
<link rel=stylesheet href='{{ asset_url }}'>
{% endstylesheets %}
Instead of that:
{% stylesheets 'bundles/webapp/css/funCommon.css'
'bundles/webapp/css/funMobile.css
filter='?yui_css'
%}
<link rel=stylesheet href='{{ asset(asset_url) }}'>
{% endstylesheets %}
I am working on a Symfony2 application. I am customising the layout.html.twig file from the FOSUserBundle.
Any HTML changes I make within the file are immediately obvious when I reload the page in the browser.
I am using assetic to link to my CSS and JS files. They appear to have linked successfully, the files contents load when I click on their paths from within the source of the web page.
However the CSS classes I have specified on the elements of the page don't seem to be appearing with their styles applied. I can't figure out why this is.
Here is the syntax I've used to link to the JS and CSS:
{% javascripts
'bundles/sysdevpunctuality/js/jquery-2.1.1.min.js'
'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<!-- Bootstrap -->
{% stylesheets 'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheets" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
Appreciate any tips on how I can go about debugging this issue.
I had the same problem, try this syntax:
{% block stylesheets %}
<link href="{{ asset('bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
Of course don't forget to install assets:
php app/console assets:install web --symlink
i cant comment but my suggestion is check the page source of the generated webpage, then you can check the directory where symfony is looking for the resources.
I am writing a Bundle to theme a site we are developing. The other Bundles call on a Core bundle for templating via Twig, and this Themeing bundle warps that core bundle.
I have done this by implementing the getParent() method inside the theme bundle class to return the name of the core bundle, thus causing Symfony2 to look in the theme bundle (for basically ANY file) before looking in the Core bundle.
Now, this works great in Dev mode, however, when I try in Production Mode, and my CSS/JS files are combined into one, the resulting path resolves to a 404 page, and all styling is lost.
I have cleared both dev and production cache, as well as rm -rf'd the dev and prod directories. Calling php app/console assetic:dump --env=prod --no-debug returns:
$ php app/console assetic:dump --env=prod --no-debug
Dumping all prod assets.
Debug mode is off.
10:25:40 [file+] /webapps/xxxbundle/app/../web/css/f996955.css
10:25:46 [file+] /webapps/xxxbundle/app/../web/js/f307b3f.js
10:26:05 [file+] /webapps/xxxbundle/app/../web/css/55d26a0.css
10:26:05 [file+] /webapps/xxxbundle/app/../web/js/ccfc30e.js
[RuntimeException]
The source file "/webapps/xxxclient/app/../web/bundles/xxxbundle/js/modernizer.custom.96376.js"
does not exist.
assetic:dump [--watch] [--force] [--period="..."] [write_to]
The web facing css and js dirs show:
$ ls web/css
55d26a0.css f996955.css
$ ls web/js
f307b3f.js
The missing JS file is likely due to another bundle that isn't being used. The main issue is, the template is looking for:
<link rel="stylesheet" type="text/css" media="screen" href="/css/2a6fc23.css">
<script src="/js/adf6a7a.js"></script>
Neither of which exist. Any ideas or directions?
[[ EDIT ]]
On further review, even the assetic production cache references these files, and yet they are never created... why? ....
[[ TEMPLATES ]]
(Overwritten Template)
{% extends 'FrontBundle:Frame:base.html.twig' %}
{% block title %}{{ page.title }}{% endblock %}
{% block wrapper %}
{# route: {{ route }} #}
{{ rendered | raw }}
{% endblock %}
(Overwriting Template)
{% extends 'SkinBundle::layout.html.twig' %}
{# Site Name #}
{% block site_name %}
{{ page.title }} | {{ parent() }}
{% endblock %}
Layout extends a base template which is just a shell of a site, in the process overwritting lets say CSS like:
{% extends 'FrontBundle:Frame:default.html.twig' %}
{# Stylesheets #}
{% block stylesheets %}
{# no execute {{ parent() }}#}
{% stylesheets
filter='cssrewrite'
'bundles/core/css/normalize.css'
'bundles/skin/css/main.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
Which is declared in the Base template as:
{# Stylesheets #}
{% block stylesheets %}
{% stylesheets
filter='cssrewrite'
'bundles/core/css/normalize.css'
'bundles/front/css/global.css'
'bundles/page/css/page.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}
<!-- Page -->
{% endblock %}
These style-sheets are not needed, which is why I have parent() wrapped in comment tags. Removing the line entirely doesn't help.
Removing parent() did help, after a thorough clearing of the cache and rebuild.
I will be making a bug ticket here soon, as for some reason having parent() inside of a comment ({# ... #}) was breaking the generation, even though nothing inside of {# ... #} should be parsed, or indeed even considered, by the template compiler.
Tricky bug.
I'm using KnPUniversity's video tutorial on Getting Started with Symfony2, and everthing's been going good except the video is teaching based off of version 2.0.3 and I am using 2.1.x-dev. When I get to a certain point in the video, it directs me to write code block #1 then modify it to more efficiently use code block #2, except code block #2 doesn't work. It doesn't throw any errors, it just fails to actually detect the stylesheets. In the source code of the page, there are zero references to any css style sheets using code block #2. Any idea what I'm doing wrong?
{# this causes the page to be styled and works fine #}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/event/css/event.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/events.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/main.css') }}">
{% endblock %}
.
{# this causes the page to be unstyled. Missing stylesheet links in page source #}
{% block stylesheets %}
{% stylesheets
'bundes/event/css/*'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
Well, I had a typo. It's not "bundes" it's "bundles". Problem solved and I'm an idiot.
When you use {{ asset() }} it creates a link to your web (public) directory.
But for the second part Assetic manages the css files - so it looks for the file inside your application and then writes it out into your web directory.
To fix your problem you can change your stylesheets like this:
{% stylesheets
'%kernel.root_dir%/../web/bundes/event/css/*'
filter='cssrewrite'
%}
But I suggest reading more about assetic to understand how you should be managing your css files Symfony 2 Assetic