symfony - 如何从版本化的 Webpack Encore 构建中获取 CSS 作为字符串，以便在电子邮件中使用它？

Question

我使用 Twig 呈现电子邮件。

要将 CSS 直接导入电子邮件，我执行了以下操作:

<style>
    {{ source('@public/build/email.css') }}
</style>

这在开发环境中效果很好，但在生产环境中效果不佳，因为在生产环境中 Assets 有版本控制(例如 email.dfase343.css)。

是否可以仅禁用此单个文件的版本控制？

我的 webpack.config.js 非常基本:

var Encore = require('@symfony/webpack-encore');

    Encore
        .setOutputPath('public/build/')
        .setPublicPath('/build')
        .addEntry('app', './assets/js/app.js')
        .addEntry('email', './assets/js/email.js')
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
        .enableSourceMaps(!Encore.isProduction())

        .enableVersioning(Encore.isProduction()) // --> only for app.js

        .enableSassLoader()
    ;

module.exports = Encore.getWebpackConfig();

更新:我的解决方案

我编写了一个简单的 Twig 函数来解决这个问题:

<?php

namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class AppExtension extends AbstractExtension
{

    private $assetsManager;

    public function __construct(\Symfony\Component\Asset\Packages $assetsManager)
    {
        $this->assetsManager = $assetsManager;
    }

    public function getFunctions()
    {
        return array(
            new TwigFunction('asset_embed', array($this, 'assetEmbed')),
        );
    }

    public function assetEmbed($uri, $package = null)
    {
        $file = __DIR__.'/../../public'.$this->assetsManager->getUrl($uri, $package);

        if (is_file($file)) {
            return file_get_contents($file);
        }

        throw new \Twig_Error('File "'.$file.'" not found.');
    }

}

用法

<style>
    {{ asset_embed('build/email.css') }}
</style>

Answer 1

虽然这不能回答您标题中的问题，但它可以让您从 webpack 生成的文件中获取 CSS 以包含在您的电子邮件中。

Webpack Encore 在您的构建文件夹中创建一个名为“entrypoints.js”的文件。您需要使用 $decodedFile = json_decode(file_get_contents('your/build/folder/entrypoints.json')); 获取并解析该文件。

然后您可以将该文件的内容作为对象进行遍历。您想要的文件路径类似于 $decodedFile->entrypoints->email->css，这将为您提供该条目的一组 CSS 文件(可以有多个文件) ，例如，如果您的 webpack.config.js 文件中有 .splitEntryChunks() 方法。

完成后，您需要对该数组中的每个文件执行 file_get_contents($yourCssFile) 以从每个文件中获取 CSS。请记住，该文件中的路径是可通过 Web 访问的路径，而不是本地路径，因此您可能需要操作它们。

当然，您只能在 PHP 中完成所有这些操作，因此您需要创建一个 Twig 扩展以允许您在模板中使用它。

令我惊讶的是，Symfony 中没有更好的方法来做到这一点 - 如果有的话，我很想知道。

完整代码(在 Twig 扩展方法 https://symfony.com/doc/current/templating/twig_extension.html 中使用，或将 $css 传递到模板中):

$files = json_decode(file_get_contents('your/build/folder/entrypoints.json'))
    ->entrypoints
    ->email
    ->css
;

$css = '';

foreach ($files as $file) {
    $css .= file_get_contents('your/build/folder/') . basename($file));
}