CssRewrite goes through app_dev.php in Symfony

[beberlei]

Using symfony2 and a cssrewrite to fix all @import they now go through app_dev.php/path/to/import/file.css which leads to 404 errors from the symfony kernel.

[kriswallsmith]

Can you provide more details about how you're using Assetic and what you expect it to do?

Also, can you debug to see if the target path in the CssRewriteFilter includes _controller/?

[beberlei]

I am using the following twig commands:

{% stylesheets 'bundles/hwsplatform/lsl/css/layout_3col_fixed.css'
               'bundles/hwsplatform/lsl/css/stylesheet_168fd464f0.css'
               'bundles/hwsplatform/lsl/css/fix_glossary_definitions.css'
               'bundles/hwsplatform/lsl/css/lsl.css'
               'bundles/hwsplatform/aristo/jquery-ui-1.8.7.custom.css'
               output='css' filter='cssrewrite'
               %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

In dev mode this becomes (and so on):

<link href="/eberlei/wsnetbeans/lsl-ff-db/trunk/web/app_dev.php/css_layout_3col_fixed_1.css" type="text/css" rel="stylesheet" />

Now this first stylesheet uses @import that now are linked to:

http://devel/eberlei/wsnetbeans/lsl-ff-db/trunk/web/app_dev.php/bundles/hwsplatform/lsl/css/main/base.css

Assetic config is:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

In CssRewriteFilter the following $targetPath is passed for the stylesheet with the @import

css_layout_3col_fixed_1.css

$sourcePath is: bundles/hwsplatform/lsl/css/layout_3col_fixed.css

[beberlei]

Ok, same happens for image rewrites of course. Which 404s them aswell.

[kriswallsmith]

I just noticed you're misusing the output attribute in the Twig tag. Early on, css was expanded to css/*.css but I've since removed that. You should set that to the asset's target path, i.e. css/packed/main.css.

[kriswallsmith]

Did you see my note about the output attribute? Does fixing that make any difference?

[DTown]

Hi Kris, I have the problem that the cssrewrite doesn't seem to work out well if I use the @..Bundle notation like {% stylesheets '@BattlFrontendBundle/Resources/public/css/basic.css' ... then he produces something like this "../../Resources/bundles/battlfrontend/images/layout/nav_line.png" in the original css file its this "url(../images/layout/search.png)" I'm not using the output attribute here.

If I use this notation {% stylesheets 'bundles/battlfrontend/css/basic.css' ... it's working for the dev mode, but not for the normal mode. ../../bundles/battlfrontend/images/layout/nav_line.png This path is generated for both.

Config settings for assetics are the same for dev&normal:

assetic: debug: %kernel.debug% use_controller: false filters: yui_css: jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar" yui_js: jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar" cssrewrite: ~

[kriswallsmith]

This is a known limitation of the Symfony integration that will be addressed in Assetic 1.1 when we add support for asset dependencies. The easiest solution is to keep everything in one load path, i.e. all CSS files in web/. You can also keep these assets in your bundle’s Resources/public/ directory and install them to web/ using the assets:install command. Either way, avoid using the @MyBundle notation to include stylesheets that reference images when defining your Assetic assets.

On Monday, July 11, 2011 at 10:11 AM, DTown wrote:

Hi Kris, I have the problem that the cssrewrite doesn't seem to work out well if I use the @..Bundle notation like {% stylesheets '@BattlFrontendBundle/Resources/public/css/basic.css' ... then he produces something like this "../../Resources/bundles/battlfrontend/images/layout/nav_line.png" in the original css file its this "url(../images/layout/search.png)" I'm not using the output attribute here.

If I use this notation {% stylesheets 'bundles/battlfrontend/css/basic.css' ... it's working for the dev mode, but not for the normal mode. ../../bundles/battlfrontend/images/layout/nav_line.png This path is generated for both.

Config settings for assetics are the same for dev&normal:

assetic: debug: %kernel.debug% use_controller: false filters: yui_css: jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar" yui_js: jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar" cssrewrite: ~

Reply to this email directly or view it on GitHub: https://github.com/kriswallsmith/assetic/issues/53#issuecomment-1548052

[lmammino]

@kriswallsmith can you provide a simple example that shows ho to handle the assest in one load path?

[pierre-b]

@Imammino:

Here is the example of the Kriswallsmith comment:

My bundle is nammed LbpCoreBundle. My assets are in Lbp\CoreBundle\Resources\public

Everytime I change something I do a "assets:install web" command.

This is in the twig layout: {% stylesheets 'bundles/lbpcore/css/*' filter='cssrewrite' %}{% endstylesheets %}

And in my css looks like : background:url(../images/corner.png) etc...

It works for me.

[lmammino]

Yes, i ended up with the same solution after a while! Anyway, Thanks a lot @pierre-b

[ardianys]

You can using this command to avoid hard copy, so you don't have to run assets:install web command everytime you make some changes in your asset

php app/console assets:install --symlink web

[lmammino]

@ardianys beware that every time you update your bundles with php bin/vendors update it will remove all your symlinks and replaces them with a raw copy of your bundles web folder. So you have to tear down the raw copies and run php app/console assets:install --symlink web again...

[ardianys]

Thanks for your info. I didn't know detailed behaviour of this command.

Regards.

[lmammino]

@ardianys, never mind ;) Have a nice weekend!

[diegosainz]

Hi all,

We have the same problem and solve it the same way as suggested here (reference the files on web/bundles, installing the assets and then compiling). But it is very uncomfortable when you are working on resources (or you have the option to work directly on the published web/bundles resources with the --watch assetic option, but then if you forget to copy your changes to Bundle/Resources you may overwrite them) so I put together a command that automatically listens for any changes on every Bundle/Resources, updates the asset in web/bundles and dumps the assetic file:

https://gist.github.com/1378305

To use it install the command in any bundle you want and run

console tracpoint:assets --watch

Regards,

Diego sperantus.com

[stof]

@diegosainz The assets:install command has a --symlink option doing a symlink instead of a copy for the assets

[diegosainz]

@stof:Yes, that's a better solution, unfortunately for us we are developing on windows and symlink option is not supported :(

[mvrhov]

AFAIK windows Vista + supports hardlinks... and afair PHP too.

[stof]

@diegosainz On windows, you need to run the script as administrator or to disable some of the checks (on 7 only as Vista does not allow disabling them) to be able to use the --symlink option.

[diegosainz]

@stof I wasnt aware of that, Thank you!

[alexismo]

So when I use the relative path for CSS images (../images/[...]), the CSS gets rewritten, as it should. (../../Resources/public/images/[...]) But the images don't show up.

When I use the full path (/bundles/planbgofone/images/[...]), the CSS does not get rewritten but the images show.

Does this have something to do with the "dev" environment versus prod?

[stof]

the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.

[mrtorrent]

@stof is there a bug report for this in AsseticBundle? I can't seem to find it

[tcz]

Woah, this looks a little bit too complex. Is there any proposal for fixing this?

[talpan]

what's the progress on this, is there any eta? I would really like a real solution, this stuff is just annoying :/.

Of course, very thankful for your support.

[Abhoryo]

I always use this without cssrewrite and the --symlink option.:

background-image: url("/bundles/mybundle/images/bg.png");

[ahundiak]

This fix for cssrewrite is to not use cssrewrite. Nor should you add bundle paths to your css. Instead, use output as follows:

   {% stylesheets 
        output="bundles/zaysoarbiter/css/forms2.css"
        '@ZaysoArbiterBundle/Resources/scss/forms2.scss'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" media="all" />
    {% endstylesheets %}

This works in development mode because the whole 'bundles/...' is still just a virtual name. For production mode, use the asset:install and the assetic:dump to copy everything to your web directory. Relative paths in css will now work fine without any rewriting.

[stof]

the other way to fix it is to use the cssembed filter to embed the images in the CSS file directly.

[pumppi]

Is there any example for the ccsembed filter?

[apfelbox]

I have a similiar problem: all request, going through app_dev.php/bundles produce a NotFoundHttpException. Without app_dev.php everything is working without errors. Is this related?

[inmarelibero]

maybe this little workaruond could be interested to someone:

{% javascripts
    [...]
    [...]
    [...]
%}
    <script src="{{ asset_url | replace({'/app_dev.php': ''}) }}"></script>
{% endjavascripts %}

javascripts are loaded in app.php and app_dev.php.

obviously a regex instead of /app_dev.php would be better

[stof]

@inmarelibero this should not be necessary at all. I guess you are mixing things between code using use_controller: true and code using use_controller: false. When using the controller, it is expected to go through the front controller. And when you don't use the controller, AsseticBundle does not add /app_dev.php AFAICT

[inmarelibero]

@stof yes you're right, use_controller was already et to false but I messed up with the cache

[liuggio]

Hi all, is there a solution for us, that we use assetic on the cloud? we have 2 problem now the first is that the path into the css is not aligned (but there's a workaround), the other is that the icons on the css are not pushed to the cloud because they are not under image assetic, do you have any idea how to solve the second?

thanks

[ismell]

Honestly.... over a year and still no fix ?

[Garfield-fr]

I have the same problem mentioned by inmarelibero. In my config, i have use_controller: false but in url, the controller is present.

I use the last asseticBundle and libs with Symfony 2.1

[benjamindulau]

Any plan about fixing this properly ? The only workaround is not enough because it means that we need to always expose any asset in the public directory (so any css, but also any less/sass ...etc. file).

What about simply allow the developer to specify a rewrite base_path in the filter configuration ? So he could still use the "@MyBundle/..." syntax and keep control on the rewrite behaviour.

[vladcosorg]

Any change?

[soerenmartius]

whats about a fix?

[sparkbuzz]

No fix yet?

[triple1]

no :(

[soerenmartius]

nothing changed yet Am 22.08.2012 um 22:25 schrieb triple1 [email protected]:

no :(

— Reply to this email directly or view it on GitHub.

Beste Grüße Sören Martius

---

Dreiecksplatz 6 24103 Kiel

Mobil.: +49 0151 407 669 46 Xing.: https://www.xing.com/profile/Soeren_Martius Skype: aicarambaa

[tranzfuse]

I, too, would love to see this solved. We're interested in having our assets live in root, so web/assets/. This can nearly be achieved with Assetic, with the exception of images that live in src/bundlename/Resources/public/ and are referenced in the CSS.

Running assets:install always copies to the web/bundle/bundlename/assets/ location, so the relative paths in the CSS of course will not point to those images. We want to be able to programmatically control where these images are copied to.

[soerenmartius]

What is with a fix?

[rpofuk]

Hi. I tried fixing this by writing custom twig filter that compiles css.twig files using twig.

This would be service and <service id="sampo.assetic.twig_filter" class="%sampo.assetic.twig_filter.class%"> <tag name="assetic.filter" alias="twig_filter"></tag> <call method="setAsseticExtension"> <argument type="service" id="assetic.twig_extension"></argument>
</call> <call method="setAssetFactory"> <argument type="service" id="assetic.asset_factory"></argument>
</call> <call method="setLoader"> <argument type="service" id="twig.loader"></argument>
</call> <call method="setTwigEnviroment"> <argument type="service" id="twig"></argument>
</call> </service>

public function filterDump(AssetInterface $asset) { $content = $asset->getContent();

    $sourceBase = $asset->getSourceRoot();
    $sourcePath = $asset->getSourcePath();
    $targetPath = $asset->getTargetPath();

    $this->fileSystemLoader->addPath($sourceBase);


    $this->twigEnviroment->setLoader($this->fileSystemLoader);

    $asseticExtension = new AsseticExtension($this->assetFactory);

    $this->twigEnviroment->addExtension($this->asseticExtension);

    $twigTemplate = $this->twigEnviroment->loadTemplate($sourcePath);

    $asset->setContent($twigTemplate->render(array()));
}

Problem I encountered was that Assetic won't add files to cache when requesting css file and throws exception:

[exception] 500 | Internal Server Error | Twig_Error_Runtime [message] An exception has been thrown during the rendering of a template ("Route "_assetic_eda3096_0" does not exist.") in "Resources/public/css/test.css.twig" at line 5. [1] Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "_assetic_eda3096_0" does not exist.") in "Resources/public/css/test.css.twig" at line 5.

Thing works if I add images that are referenced in some other files that is being rendered on page request.

If anybody has idea how to make assetic work on requesting css file problem would be solved and I could write .hm { {% image '@AdminBundle/Resources/public/images/logo.png'%} url('{{ asset_url }}');
{% endimage %}
}
in css.twig and render it like this: {% stylesheets '@AdminBundle/Resources/public/css/test.css.twig' filter='twig_filter'%}
{% endstylesheets %}

EDIT: Fixed. I just put folder css with css.twig files inside views folder, Symfony\Bundle\FrameworkBundle\Templating\TemplateReference class, and couple of other classes don't allow twig templates outside views folder, which is ok I gues. So using my custom twig_filter instead of cssrewrite, and writing my css files with assetic and twig works.

[alex88]

It would be nice to implement a filter or similar that handles the css image references like {% image %} objects so we can also add image filters to those objects. Can it be a nice idea?

[rpofuk]

I work in symfony

A implemented twig_filter explained above. It work. I just need to link public/css to views/css for it to get cached, I just hide it in Eclipse so and work with as it is in public/css. So all my images, css and js related to that Bundle can stay in that bundle, no need to install assets.

I just make my .css file .css.twig, and user assetic for images as in any other template.

It would be nice to be able to specify in Symfony that there a .twig files in some other folders so no linking would be needed.

[alex88]

@pofuk what if you want to add some assetic specific filters to the twig rendered template?

[rpofuk]

@alex88 Don't undestand your question. I use my twig_filter as normal assetic filter. And user assetic as extension to twig.

[alex88]

@pofuk I think that if you do an assetic filter that doesn't asks the user to insert twig's {% image %} inside the css it would be perfect. Maybe parsing the css and inserting {% image %} directly within the filter and then rendering the twig tag can be enough.

[alex88]

It depends when the 1.1 version comes out, but I don't think that early :)

[MPLLC]

It's frustrating that there's no fix for this, especially since using the bundle name is what's used all throughout the official Symfony documentation! Ridiculous.

[gremo]

@KevinM1 totally agree. We need a fix... soon.

[alex88]

So 1.1 is nearly out, but no fix for this yet? C'mon guys!

[jrobeson]

@kriswallsmith : is this gonna be scheduled for 1.2?

[kriswallsmith]

I'm AFK. Do we have a failing test case yet?

On Thursday, June 13, 2013 at 10:26 PM, Johnny Robeson wrote:

@kriswallsmith (https://github.com/kriswallsmith) : is this gonna be scheduled for 1.2?

— Reply to this email directly or view it on GitHub (https://github.com/kriswallsmith/assetic/issues/53#issuecomment-19439897).

[alex88]

I think that there should be a filter that creates new assets on each url() it finds inside css and so, so it gets managed by assetic and dumped/referenced together with the others

[kitingChris]

This issue is now open for 3 years.... How about finally fixing this? For my project due to serving static files not on the same server I need a fix for this problem... I need to use the @bundles notation projectwide.

[ghost]

+1 ; any updates?

[cassianotartari]

Looking for a solution too. I'm trying to work with AWS - EC2 and S3 for assets without success

[ghost]

+1 Please fix this soon! This is extremely hindering any sort of streamlined development!

[smilesrg]

+1 for this fix. But everyone can use FkrCssURLRewriteBundle for fixing this issue

[ghost]

We need an official solution which we could put into the official symfony2 documentation!

[rimouesleti]

Same problem here with Symfony 2.6

[n1c01a5]

Same problem.

[clubdesarrolladores]

+1 same problem, please fix this soon

[ghost]

I think there will be never a fix for this. The Best Practice currently is to use css files in the web directory (I prefer web/css or web/bundles/app/css).

See this warning in the Symfony2 Book: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

You should do:

    {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}

You should NOT do:

    {% stylesheets '@AppBundle/Resources/public/css/*' filter='cssrewrite' %}

[drAlberT]

I can't see any "best practice" sentence on the doc .. simply it makes us aware of the issue

+1 for taking this issue on a solution

[ghost]

Here is the Best Practice to store the css files in the web directory: http://symfony.com/doc/current/best_practices/web-assets.html

[drAlberT]

@JHGitty yep I see, but this is a bp for application .. if I have a bundle to redistribute or reuse I need to have my assets bundled together with the code who uses them

So I agree to avoid misuse of bundled-assets, but they are a tool that has its own field of application and can't be ignored or labeled as "poor practice" always IMHO

However, I think assets should be treated all the same way ... so there should be no difference in the use of css, js or images .. I agree to use {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}, but we should do the same with JS and images then :)

[stphane]

app_dev is driving me crazy with a web/fonts/... issue ! Giving this stylesheet snippet:

            {% stylesheets
                filter="node_scss,uglifycss"
                output="dist/main.css"
                '../app/Resources/public/scss/main.scss'
            %}
                <link rel="stylesheet" href="{{ asset_url }}">
            {% endstylesheets %}

The resulting css "/app_dev.php/dist/main_main_1.css" file points to some bootstrap glyphicons fonts referenced with "/fonts/bootstrap/glyphi..." okey so I copied this fonts directory to /web.

I then expected the browser to search for those files inside "/app_dev.php/fonts/bootstrap/glyph…", this is what is done but a 404 is served instead by the dev controller :angry: ! If I hit the url directly from vhost root "/fonts/bootstrap/glyph…", the file is correctly served by NGINX.

Is there a way to make app_dev resolve the /fonts path nicely (I mean in a clean way) ? Could someone please help me handling this ? Thank you !

[ReneMuetti]

This is a design bug. Since you do not work through a config switch, but with different scripts that is an unavoidable consequence.

I had the same problem. The support was unfortunately no help. Also sont there are no viable solutions. I therefore once assembled a "solution": the page-template (base.html.twig)

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="de"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="de"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="de"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="de"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {{ include('AppBundle:default:scss.html.twig') }}
....

then the CSS file (scss.html.twig)

{% if app.environment == 'dev' %}
    {% stylesheets filter="scssphp" output="css/app_dev.css" debug=true
        "assets/scss/global-dev.scss"
        "assets/css/*.css"
    %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" media="screen">
    {% endstylesheets %}
{% else %}
    {% stylesheets filter="scssphp" output="css/app_prod.css" debug=true
        "assets/scss/global-prod.scss"
        "assets/css/*.css"
    %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" media="screen">
    {% endstylesheets %}
{% endif %}

then generate 2 different scss: one contains the paths for productive operation ( '../fonts/' ) and the other, the paths for the DEV mode ( '../../fonts/' ).

Another solution I have not found. The Simple tile cause must be resolved by the development team. Both app*.php together are placed and the DEV mode must be regulated through a config option.

[stphane]

@ReneMuetti Thank you very much for sharing ! In the meantime, I ended up turning use_controller switch to false inside the configuration file and I now use assetic's watcher in dev environment. I didn't think of wrapping Assetic tags between conditions since Assetic does not interpret twig files but only parses them in order to process stylesteets and javascripts tags. Actually it does make sense ! I will definitely concider your «solution» for futur projects.