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

Question

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

Answer 1

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.

Answer 2

Now with 2.4 (or maybe even before) custom js can be simply added to

assets/admin/app.js

via this you have the full power to change anything on the page ;)

(function (d) {
    // inject the global navigation
    const script = d.createElement('script');
    const style = d.createElement('link');
    const head = d.querySelector('head');

    style.setAttribute('href', '/path/to/some.css');
    style.setAttribute('rel', 'stylesheet');

    head.append(style);

    script.async=true;
    script.src='/path/to/some.js';

    head.append(script);
})(document)