Sulu 2.0：如何在admin视图中添加自定义css和js

Question

是否可以将自定义 css 和自定义 js 文件添加到 sulu 管理员？

我看到，它是由 vendor/sulu/sulu/src/Sulu/Bundle/AdminBundle/Resources/views/Admin/main.html.twig

渲染的单页应用程序

我能以某种方式覆盖这个模板吗？或者更好的是，有没有一种方法可以扩展它，而不会丢失未来提交给捆绑包的更新？

非常感谢！
安德烈亚斯

Answer 1

您可以使用 webpack 别名覆盖 .scss 中的特定 .scss 文件，例如登录 scss:

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

然后在文件中执行如下操作：

/* 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;
}

这个例子也可以在这里找到：https://github.com/sulu/sulu-demo/pull/62/files

想提一下，没有为这种覆盖提供 bc-promise。

Answer 2

现在使用 2.4（或者甚至更早）自定义 js 可以简单地添加到

assets/admin/app.js

通过这个，您可以完全更改页面上的任何内容；)

(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)

Sulu 2.0：如何在admin视图中添加自定义css和js

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

symfony

sulu