0

In an existing project, the CSS files are compiled with less. In web/css/ I have three files: all.less, main.less and styles.less:

web/css/all.less:

@import '../vendor/bootstrap-2.3.2/less/bootstrap.less';
@import 'styles.less';
@import 'main.less';

In styles.less file I've added the next line:

.btn {
    font-size: 13px !important;
}

This class (.btn), has not more !important tags.

Then I compile the all.less file with command line:

lessc web/css/all.less

and the compiled file (web/compiled/b2b7f11.css) has the added lines (.btn {...).

This CSS file is called from a template:

    {% stylesheets output='compiled/css/*.css' 'css/all.less' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

but when I reload the browser (after clearing browser cache), the changes (font-size) are not loaded. The font-size rule still keep the older value (14px). Any idea of what I'm missing?

I'm working on a development environment, so I don't need to clear cache.

Manolo
  • 24,020
  • 20
  • 85
  • 130
  • Try cleaning the cache in your browser. Or check if the url is corrected in the html (with a inspector like chrome), and the errors in the references (in the chrome console), maybe could be 2 problems, first one, the cache, second one, error in the render of the paths – Benjamin RD Feb 26 '14 at 14:25
  • @user3294396 - I had cleared the browser cache. The file loaded is `web/compiled/css/b2b7f11_all_1.css`. – Manolo Feb 26 '14 at 14:27
  • 1
    don't use important unless absolutely necessary. And if you use Google chrome you need to clear cache. There is an option to disable cache when the developer tools is open. Also is there a parent around that class in your css? maybe you added the css in the wrong place – Christophe Feb 26 '14 at 14:29
  • Check the tag with .btn with the chrome inspector. That shows you the css that the reference is obtained. You can check that. – Benjamin RD Feb 26 '14 at 14:30
  • @user3294396 - As I've said, the new lines are not loaded. It has a `font-size:13px` from other line. – Manolo Feb 26 '14 at 14:31
  • @Christophe - `!important` tag is added just to check why it's not working. I know I have to clear browser cache, as I've said on the question. There are not more `!important` tags. The `font-size` rule got from the inspector, shows a `font-size:13px` from other line, but `!important` one is not loaded. – Manolo Feb 26 '14 at 14:35
  • @ManoloSalsas If it is not loaded it is probably not on the correct place. is there a parent class around it? has the element you are checking on the btn class? – Christophe Feb 26 '14 at 14:38
  • @Christophe - But it seems to be in the correct place. Look at the second comment. There are some parent classes, but the rule comes from a `.btn` selector and without `!important` tag. – Manolo Feb 26 '14 at 14:41
  • I got it. I was clearing the cache for production evironment. Solved with `php app/console cache:clear --env=dev --no-debug` – Manolo Feb 26 '14 at 14:46

2 Answers2

1

I was clearing the cache for production mode. Solved with the next command:

php app/console cache:clear --env=dev --no-debug
Manolo
  • 24,020
  • 20
  • 85
  • 130
0

Quick search led me to this Symfony2, loading css files without cache

Give a shot at the selected answer and tell me if it worked or not, this seems to be close enough to your issue.

-Karink.

Community
  • 1
  • 1
Karink
  • 23
  • 1
  • 3