Why are CSS styles not applied to the page?


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
        <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