Symfony2, loading css files without cache

Question

Currently i'm doing design of site based on symfony2, question is how to disable cache of css files? Now if i change something in css file - nothing changes in browser. When i try to cache:clear - still nothing.

config.yml:

# Assetic Configuration
assetic:
debug:          "%kernel.debug%"
use_controller: true
#bundles:        [ ]
#java: /usr/bin/java
filters:
    cssrewrite: ~
    #closure:
    #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
    yui_css:
        jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"

and in twig

    {% stylesheets filter="cssrewrite" output="css/general.css"
        "@EveCommonBundle/Resources/public/css/main.css" 
        "@EveCommonBundle/Resources/public/css/another.css" %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}

What must i change to get "latest" css file in browser?

Problem is that when i change @EveCommonBundle/Resources/public/css/main.css, in web/css still remain old one (dumped by terminal), and it's not been recreated, that's why no "new changes" shows in browsers, and recreate that file i can only by terminal... how can i get sf2 recreate css files on each F5 in browser (in web/css folder)?

score 4 · Answer 1 · answered Jan 26 '13 at 16:30

4

In your dev-environment, i.e. when accessing your site via app_dev.php, the paths to the assets are generated dynamically and thus each change should be immediately visible.

You can use the following command to automatically create assets (more on this can be found in the cookbook, see link below), but generally this should not be necessary:

php app/console assetic:dump --watch

When using assetic and you want to see your changes in the prod-environment, you have to dump the assets first to make them accessible:

php app/console assetic:dump --env=prod --no-debug

For more information read the section Dumping Asset Files in How to use Assetic for Asset Management in the cookbook.

If all else fails, you might want to use the following in your templates:

{% if app.environment == 'prod' %}{% else %}{% endif %}

to only use assetic when in production environment.

answered Jan 26 '13 at 16:30

dbrumann

16,803
2
42
58

i don't need "dump" css, i want that css shows "current content" - not cached, not dumped, "only last saved" assetic:dump creates "temp" css files and uses them, do you know options to force this "creation" - it means that every F5 css file must be recreated in /web/css folder ? – user1954544 Jan 26 '13 at 16:38
"In your dev-environment, i.e. when accessing your site via app_dev.php, the paths to the assets are generated dynamically and thus each change should be immediately visible." - no it's not, i'm trying to figure it why? – user1954544 Jan 26 '13 at 16:46
@user1954544 If you are using the dev-environment and the assets do not refresh automatically it's most likely a caching problem. Have you checked the response headers? Have you tried reloading the page using ctrl+shift+r (ignores cache)? – dbrumann Jan 26 '13 at 16:52
"php app/console assetic:dump --env=prod --no-debug" This will physically generate and write each file that you need (e.g. /js/abcd123.js). If you update any of your assets, you'll need to run this again to regenerate the file. http://symfony.com/doc/current/cookbook/assetic/asset_management.html#cookbook-assetic-dumping =\ – user1954544 Jan 26 '13 at 16:58
-- Have you tried reloading the page using ctrl+shift+r (ignores cache)? -- No still the same files. – user1954544 Jan 26 '13 at 17:00
Problem is that when i change "@EveCommonBundle/Resources/public/css/main.css", in web/css still remain old one (dumped by terminal), and it's not been recreated, that's why no "new changes" shows in browsers, and recreate that file i can only by terminal... how can i get sf2 recreate css files on each F5 in browser (in web/css folder)? – user1954544 Jan 26 '13 at 17:05
I’m having the same issue as the OP. Your claim that `app_dev.php` makes all changes immediately visible is false in general. It is true for `web\resources\css\style.css` but not for CSS resources inside the Bundles. – Timwi Jun 28 '14 at 06:55

score 4 · Accepted Answer · answered Mar 29 '13 at 16:54

Problem was.... Uhm, don't even know in what but. Current config.yml and console commands done their job. (means that what ever i change in css it will shows as "online mode" in browser)

assets:install web --symlink
assetic:dump web

parts from config.yml

# Twig Configuration
twig:
    cache:            false

# Assetic Configuration
assetic:
    assets: 
        default_css:
            inputs:
                - '%kernel.root_dir%/Resources/public/css/default.css'

    debug:          "%kernel.debug%"
    use_controller: true
    bundles:        []
    #java: /usr/bin/java
    filters:
        cssrewrite: ~

Also helps (maybe, don't know)

// If you don't want to setup permissions the proper way, just uncomment the following PHP line
// read http://symfony.com/doc/current/book/installation.html#configuration-and-setup for more information

umask(0000);

In twig it looks like this

{% stylesheets "@default_css" filter="cssrewrite" %}
    <link href="{{ asset_url }}" type="text/css" media="all" rel="stylesheet" />
{% endstylesheets %}

With this params I can create\edit\delete any data from css and it would be show in browser immediately.

PS: I showed code "not common", other settings in config.yml i think the same as base one.

score 1 · Answer 3 · answered Jan 26 '13 at 16:16

Caching is a standard browser behavior. You can either clear it manually each time, or set up a cache manifest : https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache?redirectlocale=en-US&redirectslug=Offline_resources_in_Firefox This is HTML5 though and is not supported everywhere.

A simple way to disable the caching of files is to change the url each time the file changes : you can append a random string or a version number to your href :

<link rel="stylesheet" type="text/css" href="{{ asset_url }}?{{some_random_string_goes_here}}=0" />

or

<link rel="stylesheet" type="text/css" href="{{ asset_url }}?VERSION={{version_number}}" />

The random string is simplier for debugging purpose, since you don't need to update the version number manually each time you change your css. But depending on the size of the string, you might get unlucky and get the same string twice...

{% stylesheets '@EveCommonBundle/Resources/public/css/*' %} {% endstylesheets%} nothing changed =\ i know about cache of browser, but it's not it, sf2 simple use "old compiled css file" and not rectreate new one. — user1954544, Jan 26 '13 at 16:23
Hmm, I guess you are using sass, this seems to be a known issue : https://github.com/symfony/symfony/issues/5713. i found another post on stakcoverflow that might help you : http://stackoverflow.com/questions/11419151/static-assets-not-refreshing-with-symfony2-clear-cache-command — Alexandre de Champeaux, Jan 26 '13 at 16:37

score 0 · Answer 4 · answered Mar 12 '13 at 10:13

if you are working with symfony 2 assets in dev. environment, simply use this command:

php app/console assets:install
php app/console assetic:dump --watch

ref from : http://symfony.com/doc/2.1/cookbook/assetic/asset_management.html#dumping-asset-files-in-the-dev-environment

Symfony2, loading css files without cache

4 Answers4

Linked