Webpack - post css -url и файл-загрузчик

Question

Я создаю для себя простую конфигурацию веб-пакета для обработки S CSS, ES6 +, копирования изображений / шрифтов и т. Д. c .. для разработки темы на Shopify. Я столкнулся с препятствиями при попытке обработать шрифты / изображения. file-loader хорошо с ними справляется, но для Shopify, когда в CSS есть функция url(), путь должен быть похож на {{- 'file-name.ext' | asset_url -}}. Сам пакет CSS должен быть похож на bundle.css.liquid. Это хорошо, все работает так, как ожидалось, как для копирования активов. Вот конфиг веб-пакета:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const sass = require('sass');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, '../shopify/assets/'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    browsers: ['last 3 version']
                  }
                }
              ]
            ]
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './config'
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff2?|ttf|otf|eot)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css.liquid'
    })
  ],
  mode: 'production',
  watch: true
};

Теперь, когда я попытался выполнить какую-то работу для url(), он тоже работает, как и ожидалось, но теперь он не копирует файлы в нужную папку. Компилируется bundle.js и bundle.css.liquid, как и ожидалось, но на этот раз активы не копируются. Мне нужны ресурсы, запрошенные в url() и изменение URL в скомпилированных пакетах. Вот пост css config:

const fs = require('fs');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcssurl = require('postcss-url');
const chalk = require('chalk');

const urlOptions = {
  url: (asset, dir) => {
    const file = asset.url.split('/')[2];
    const processedUrl = `{{- ${file} | asset_url -}}`;

    return processedUrl;
  }
};

module.exports = {
  plugins: [autoprefixer, cssnano, postcssurl(urlOptions)]
};

Я ценю любые советы. Заранее спасибо!

Answer 1

Ваш test является своего рода странным

Вы можете проверить полный пример здесь

       {
                test: /\.(css|scss|sass)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: "postcss",
                            plugins: () => [
                                require("postcss-flexbugs-fixes"),
                                require("postcss-preset-env")({
                                    autoprefixer: {
                                        flexbox: "no-2009",
                                    },
                                    stage: 3,
                                }),

                                postcssNormalize(),
                            ],
                            sourceMap: true,
                        }
                    },
                    { loader: 'sass-loader' },
                ]
            }