Important

You are browsing the documentation for version 3.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Stylesheets (SCSS)

Create and Embed Custom Stylesheets

SCSS files should be stored in the Resources/public/css/ folder of a bundle and registered in the Resources/config/oro/assets.yml configuration file:

1# src/Acme/NewBundle/Resources/config/oro/assets.yml
2css:
3    inputs:
4        - 'bundles/acmenew/css/colors.scss'
5        - 'bundles/acmenew/css/top-menu.scss'
6        - 'bundles/acmenew/css/popups.scss'
7        - 'bundles/acmenew/css/product-view-page.scss'

To apply changes, run the command:

$ php bin/console oro:assets:install  --symlink

In this example, all four SCSS files from your bundle along with all the other files from the Oro Platform and third-party bundles will be merged and dumped to the public/css/oro.css file.

If you want to keep your CSS code separately, you can dump all your SCSS files to another compiled file. To do that, define a new entry point in assets.yml

1# src/Acme/NewBundle/Resources/config/oro/assets.yml
2acme_styles: # entry point name
3    inputs:
4        - 'bundles/acmenew/css/colors.scss'
5        - 'bundles/acmenew/css/top-menu.scss'
6        - 'bundles/acmenew/css/popups.scss'
7        - 'bundles/acmenew/css/product-view-page.scss'
8    output: 'css/acme.css' # new output file path relative to the public/ folder

Use the corresponding placeholder to put compiled CSS file to the head of your document

 1# src/Acme/Bundle/NewBundle/Resources/config/oro/placeholders.yml
 2placeholders:
 3    placeholders:
 4        head_style:
 5            items:
 6                acme_css:
 7                    order: 150
 8
 9    items:
10        acme_css:
11            template: "@AcmeNew/acme_css.html.twig"

and finally, add the template for rendering the style tag.

1# src/Acme/Bundle/NewBundle/Resources/views/acme_css.html.twig
2<link rel="stylesheet" media="all" href="{{ asset('css/acme.css') }}" />

Warning

You can also put your code in CSS files which will be compiled together with SCSS files. However, keep in mind that the CSS loader is deprecated by the node-sass npm module, and it will stop working after the module update.

Development Tips

The application uses a Webpack tool for assets building. It supports a quite useful feature of mapping compiled CSS to SCSS sources. So, in browser’s web inspector (e.g., Google Chrome), you can see which SCSS code is styling an element directly.

The assets building takes some time. So better build only the theme that is currently required. To speed up the process, add a theme name after the build command.

$ php bin/console oro:assets:build admin.oro

Also, you can use the watch mode to rebuild assets automatically after some SCSS file is changed. Just add the --watch (or -w) option to the build command.

$ php bin/console oro:assets:build --watch

Refer to Asset Commands for more information.