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:

src/Acme/Bundle/DemoBundle/Resources/config/oro/assets.yml

css:
    inputs:
        - 'bundles/acmedemo/css/colors.scss'
        - 'bundles/acmedemo/css/top-menu.scss'
        - 'bundles/acmedemo/css/popups.scss'
        - 'bundles/acmedemo/css/product-view-page.scss'

You can import Sass modules from node_modules. Just prepend them with a ~ to tell Webpack that this is not a relative import.

src/Acme/Bundle/DemoBundle/Resources/config/oro/assets.yml

css:
    inputs:
        - '~prismjs/themes/prism-coy.css'

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

src/Acme/Bundle/DemoBundle/Resources/config/oro/assets.yml

acme_styles: # entry point name
    inputs:
        - 'bundles/acmedemo/css/colors.scss'
        - 'bundles/acmedemo/css/top-menu.scss'
        - 'bundles/acmedemo/css/popups.scss'
        - 'bundles/acmedemo/css/product-view-page.scss'
    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

src/Acme/Bundle/DemoBundle/Resources/config/oro/placeholders.yml

placeholders:
    placeholders:
        head_style:
            items:
                acme_css:
                    order: 150

    items:
        acme_css:
            template: "@AcmeDemo/acme_css.html.twig"

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

src/Acme/Bundle/DemoBundle/Resources/views/acme_css.html.twig

<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 it is better to 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.