Skip to content

Stylesheets

Jump to bottom
Steven Pribilinskiy edited this page Jun 11, 2017 · 4 revisions

Loading CSS with an external stylesheet url

By default, CSS is loaded and applied from inside your javascript code. There are no additional requests to the server, but if you want to load CSS instantly from <link> tag, enable ExtractTextPlugin:

golden_planet_webpack:
    config:
        parameters:
            extractCss: true

This is also required if you want to include css/less/sass files directly by webpack_asset function.

In your twig template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {% set cssUrl = webpack_asset('@ApplicationBundle/Resources/assets/main.js', 'css') %}
    {% if cssUrl %}
        <link rel="stylesheet" href="{{ cssUrl }}"/>
    {% endif %}
</head>
<body>
    <script src="{{ webpack_asset('@ApplicationBundle/Resources/assets/main.js') }}"></script>
</body>
</html>

Normally you would only need to load <script> tag and all require()d styles would be loaded automatically.

webpack_stylesheets tag

To avoid setting CSS URL to a temporary variable, you can use webpack_stylesheets tag, similarly as in Assetic:

{% webpack_stylesheets '@ApplicationBundle/Resources/assets/main.js' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
{% end_webpack_stylesheets %}

You can provide more than one input file in this tag - they will not be merged together, the code inside the tag will just be repeated with every generated asset.

There is also webpack js tag (use it only for javascript content) and webpack_assets tag (type is guessed for each asset, so might be used for images).

Keep in mind that you must provide hard-coded asset paths here, same as in webpack_asset function. This is to find all available assets in compile-time.

Clone this wiki locally