CssRewrite 过滤器不会将相对 URL 转换为绝对

Question

我正在尝试将所有使用的 css 文件合并为一个文件。但是包含具有相对路径的资源会导致问题。我尝试了 assetic 的 CssRewriteFilter 但它不起作用。

这是我的代码：

    $files = [
        '/node_modules/select2/dist/css/select2.min.css',
        '/node_modules/jquery-datetimepicker/jquery.datetimepicker.css',
        '/node_modules/icheck/skins/square/blue.css',
        '/node_modules/Plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css',
        '/node_modules/pace/themes/white/pace-theme-flash.css',
        '/node_modules/lightgallery/dist/css/lightgallery.min.css',
        '/node_modules/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css',
        '/node_modules/sweetalert2/dist/sweetalert2.css',
        '/node_modules/animate.css/animate.min.css',
        '/node_modules/fullcalendar/dist/fullcalendar.min.css',
        '/node_modules/flag-icon-css/css/flag-icon.min.css',
        '/theme/assets/skin/default_skin/css/theme.css',
    ];

    $am = new \Assetic\AssetManager();

    $items = [];

    foreach ($files as $file) {
        $filename = APP_ROOT_DIR . '/public/ui' . $file;
        $items[] = new \Assetic\Asset\FileAsset($filename, [new \Assetic\Filter\CssRewriteFilter()]);
    }

    $collection = new \Assetic\Asset\AssetCollection(
        $items
    );
    $collection->setTargetPath('vendor.css');

    $am->set('collection', $collection);

    $writer = new \Assetic\AssetWriter(APP_ROOT_DIR . '/public/ui/shared/css/');
    $writer->writeManagerAssets($am);

我的期望：

当 img 包含在 ../img/test.png 代码中时 /node_modules/test/css/test.css Assetic 应该将其重写为 /node_modules/test/img/test.png

Answer 1

尝试构建您的 FileAsset class 如：

new \Assetic\Asset\FileAsset(
    $filename,
    [new \Assetic\Filter\CssRewriteFilter()],
    '/node_modules/test/'
);

在 src/Assetic/Asset/FileAsset.php:37 中，我们看到您可以包含一个 $sourcePath 作为第三个参数。

https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Asset/FileAsset.php#L37

您可能想将 $files 数组重新调整为

$files = [
    ['/node_modules/select2/dist/css/', 'select2.min.css']
    ...
];

这样你就可以像

一样调用$sourcePath两次

new \Assetic\Asset\FileAsset(
    APP_ROOT_DIR . '/public/ui' . $file[0].$file[1],
    [new \Assetic\Filter\CssRewriteFilter()],
    '/public/ui'.$filename[0]
);

CssRewrite 过滤器不会将相对 URL 转换为绝对

CssRewrite filter does not convert relative urls to absolute

css

php

assets

asset-pipeline

assetic