[SOLVED] Sulu 2.0: How to add custom css and js to the admin view

Sulu 2.0: How to add custom css and js to the admin view

Is it possible to add a custom css and a custom js file to the sulu admin?

I saw, that it is a single page application rendered by vendor/sulu/sulu/src/Sulu/Bundle/AdminBundle/Resources/views/Admin/main.html.twig

Can I override this template somehow? Or even better, is there a way to extend it, without loosing future updates commited to the bundle?

Thx a lot!
Andreas

Solution

You can override specific .scss files in your webpack.config.js with the webpack alias as example here the login scss:

    config.resolve.alias[loginScssPath] = path.resolve(__dirname, 'style-overwrites/login.scss');

And then in the file do something like:

/* import original stylesheet to keep original styling */
@import 'sulu-admin-bundle/containers/Login/login.scss';

/* overwrite style for specific elements */
.login-container {
    background-color: lightpink;
}

This example can also be found here: https://github.com/sulu/sulu-demo/pull/62/files

Want to mention that no bc-promise is given for this kind of overrides.