Javascript 网页包-邮政编码url和文件加载器

我正在为自己构建一个简单的网页包配置，以处理SCS、ES6+、图像/字体复制等。。在Shopify上开发主题。 我在尝试处理字体/图像时遇到了一个障碍。

文件加载器

处理得很好，但是对于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更改。以下是POSTSS配置：

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)]
};

---

谢谢你的建议。提前谢谢你

你的

测试

有点古怪

您可以查看完整的示例

{
测试：/\（css | scss | sass）$/，
使用：[
{loader:'style loader'}，
{loader:'css loader'}，
{
加载器：“postss加载器”，
选项：{
标识：“邮政编码”，
插件：（）=>[
需要（“POSTSS flexbugs修复”），
要求（“邮政编码预设环境”）({
自动刷新器：{
flexbox：“no-2009”，
},
阶段:3,，
}),
postsssnormalize（），
],
sourceMap:true，
}
},
{loader:'sass loader'}，
]
}

你的

测试有点古怪

您可以查看完整的示例


{
测试：/\（css | scss | sass）$/，
使用：[
{loader:'style loader'}，
{loader:'css loader'}，
{
加载器：“postss加载器”，
选项：{
标识：“邮政编码”，
插件：（）=>[
需要（“POSTSS flexbugs修复”），
要求（“邮政编码预设环境”）({
自动刷新器：{
flexbox：“no-2009”，
},
阶段:3,，
}),
postsssnormalize（），
],
sourceMap:true，
}
},
{loader:'sass loader'}，
]
}
您能定义“怪异”吗？从你的例子中，我没有弄清楚我的错误在哪里。你能给我下个定义吗？从你的例子来看，我没有弄清楚我的错误在哪里。