Using CSS and JavaScript files in themes.

This quick tip shows off the best way on how to use CSS and JavaScript files for your custom themes, in order to enable them to be automatically compressed by the Shopware theme compiler. To use this feature you have to place your CSS and JavaScript files inside your theme directory under the subdirectories frontend/_public. This would be an example directory structure:

ExampleTheme
└── frontend
    └── _public
        └── src
            ├── css
            │   └── example.css
            └── js
                └── example.js

As the second step you will have to define the CSS or JavaScript files you would like to use inside your custom theme. This can be done by adding an array to your Theme.php file that contains the specific file paths, as the following examples shows:

Add CSS files:

protected $css = array(
    'src/css/example.css'
);

Add JavaScript files:

protected $javascript = array(
    'src/js/example.js'
);

After clearing the theme cache the changes should be displayed in the storefront.