Question

我有一个使用Symfony 4开发的应用程序，它使用SonataAdminBundle和Webpack Encore。

对于管理员，我使用额外的JS和CSS。源文件为：

- assets
  - css
    app.css
  - js
    app.js

运行yarn encore dev后，以下文件会撞到public\build\中：

app.css
app.js
runtime.js

在config（sonata_admin的{{1}}中，我这样引用它们：

config/packages/sonata_admin.yaml

问题是，当我要部署应用程序时，我必须运行sonata_admin: extra_stylesheets: - build/app.css extra_javascripts: - build/runtime.js - build/app.js，然后资产的文件名更改，例如yarn encore prod，其中动态生成中间部分。

在Twig模板中，我可以使用例如：

app.ea54ac26.js

加载所有内置的JS文件。

在Sonata Admin的配置文件中引用这些文件的正确方法是什么？

Answer 1

我找不到在config中使用Webpack编译文件的方法。我猜extra_stylesheets和extra_javascripts可能用于静态命名脚本。

我发现此问题的方式（对于使用Sonata Admin 3.51.0的Symfony 4项目）是将vendor/sonata-project/admin-bundle/src/Resources/views/standard_layout.html.twig复制到templates/bundles/SonataAdminBundle/standard_layout.html.twig，然后在新复制的文件中添加以下内容：

{% block stylesheets %}

    [ORIGINAL CONTENT]

    {# Admin Webpack Encore generated custom stylesheets #}
    {{ encore_entry_link_tags('admin') }}

{% endblock %}

[...]

{% block javascripts %}

    [ORIGINAL CONTENT]

    {# Admin Webpack Encore generated custom javascript #}
    {{ encore_entry_script_tags('admin') }}

{% endblock %}

然后编辑webpack.config.js

Encore
    [...]
    .addEntry('app', './assets/js/app.js')
    .addEntry('admin', './assets/js/admin.js')
    [...]

使用以下内容创建了assets/js/admin.js：

require('../css/admin.scss');

// add other required JS libs here

// add custom JS here or require it from external files just as you do with libs

console.log('it works');

使用以下内容创建了assets/css/admin.scss：

.skin-black {
    .main-header > {
        .logo {
            background-color: red;
            color: white;
    }
}

现在，您需要清除Symfony的缓存php bin/console cache:clear，以便注意新模板，您应该完成此工作。访问管理部分时，您应该在浏览器的控制台中看到消息it works，该管理徽标的背景应该为红色（假设您在项目中使用SCSS）。

如果您不在项目中使用SCSS，则可以使用.css文件扩展名和某些CSS。

这可能不是最好的解决方案，但绝对可以。

现在与jQuery版本战斗的好运：）

如何在Sonata Admin的配置中引用已建资产

1 个答案: