CSS modifications are not refreshed in Symfony2, dev environment

Question

This is a recurring problem but none of the proposed solutions convince me.

According to documentation, when using dev environment, modifications made to CSS's files in Resources/public/css are refreshed immediately, but they are not.

All solutions were that I need to issue a assetic:dump command but this is not the solution. If I do that, several JS and CSS files fill JS and CSS directories of the web folder, most of them repeated files. So, this is not the solution.

Currently, I have in my CSS and JS folders only CSS and JS files for production environment that are loaded when used app.php entry point.

When I use app_dev.php entry point, the site works, CSS are loaded, JS are loaded, but not the ones belonging to Resources/public folder.

CSS URL is this: http://compromisos.local/app_dev.php/css/base_style_1.css. The corresponding CSS file is style.css.

I found out that the CSS are coming from web/bundles/mybundle/css (or js) folder. So, when I change a CSS file in Resources/public folder, I need to publish assets first.

I was trying to configure assetic to use the CSS and JS rom Resources/public folder instead, but without success.

This is what I have tried so far:

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    read_from:      %kernel.root_dir%/Resources/public/
    write_to:       %kernel.root_dir%/../web/
    bundles:        [ FOSUserBundle, DesytecGestionBundle ]

Any help will be appreciated.

Thomas Potaire · Accepted Answer · 2013-10-15 02:14:29Z

5

What I use constantly in my dev environment

My assetic config parameter:

assetic:
    debug:          %kernel.debug%
    use_controller: true # set to true in config_dev.yml{1} otherwise default to false{2}
    # bundles:        [ ]
    filters:
        cssrewrite: ~

{1} config_dev.yml {2} config.yml

Then I just do:

php app/console assets:install
php app/console assetic:dump --watch (deprecated in 2.4, you should use: php app/console assetic:watch)

I also reference my file the following way:

{% stylesheets '@AcmeDemoBundle/Resources/public/css/style.css' %}
  <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

answered Oct 15, 2013 at 2:14

Thomas Potaire

6,29638 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jstuardo Over a year ago

I have solved css problem, but a new problem occured, and it is concerning images referenced inside CSS file. When running the application in dev mode, assetic transforms images links inside CSS to be ../Resources/public/images, which of course does not exist in public web folder. How can I resolve this?

Thomas Potaire Over a year ago

If you use the solution in my answer, then there is two ways you can handle this (probably more), either you put the images within web/images and reference them in the CSS via ../images/filename.extension or you can reference the full path like /bundles/bundlename/images/filename.extension. When you run the command assets:install it will install the different assets within their respective bundle folders in web/bundles.

jstuardo Over a year ago

Thanks! I have finally use the first way... I have placed images in /web/images folder and referenced by url(/images/......) inside the CSS.

Collectives™ on Stack Overflow

CSS modifications are not refreshed in Symfony2, dev environment

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related