Как получить CSS в виде строки из версионной сборки Webpack Encore, чтобы использовать ее в электронном письме? - PullRequest
Новая
       35

Как получить CSS в виде строки из версионной сборки Webpack Encore, чтобы использовать ее в электронном письме?

0 голосов
/ 12 октября 2018

Я отрисовываю электронные письма, используя Twig.

Чтобы импортировать CSS непосредственно в электронное письмо, я сделал следующее: 

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

Это хорошо работает в среде разработчиков, но не работает,где ресурсы имеют версии (например, email.dfase343.css).

Можно ли отключить управление версиями только для этого отдельного файла?

My 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>

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Хотя это не отвечает на вопрос в вашем заголовке, оно позволит вам получить CSS из сгенерированных файлов веб-пакета для включения в вашу электронную почту.

Webpack Encore создает файл в вашей сборкепапка с именем "entrypoints.js".Вы захотите получить и проанализировать этот файл, используя $decodedFile = json_decode(file_get_contents('your/build/folder/entrypoints.json'));.

Затем вы можете просмотреть содержимое этого файла как объект.Путь к файлу, который вы хотите, будет примерно таким, как $decodedFile->entrypoints->email->css, который даст вам массив CSS-файлов для этой записи (может быть более одного файла, например, если у вас есть метод .splitEntryChunks() в вашем веб-пакете.файл config.js.

После того, как вы получите это, вам нужно будет сделать file_get_contents($yourCssFile) для каждого файла в этом массиве, чтобы получить CSS из каждого файла. Имейте в виду, что пути в этомфайл - это пути, доступные через Интернет, а не локальные пути, поэтому вам, возможно, придется манипулировать ими.

Конечно, вы можете делать все это только в 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));
}
0 голосов
/ 18 октября 2018

Не уверен, что это хорошее решение, но вы можете попробовать добавить плагин ignore-loader и сопоставить файлы, чтобы игнорировать их, например, в webpack.config.js игнорировать все файлы .css 

module.exports = {
  // ... other configurations ...
  module: {
    loaders: [
      { test: /\.css$/, loader: 'ignore-loader' }
    ]
  }
};
...