Webpack - postcss-url和文件加载器

Question

我正在为自己建立一个简单的webpack配置，以处理SCSS，ES6+，图片/字体复制等。用于在Shopify上开发主题。在尝试处理字体/图像时，我遇到了一个障碍。file-loader可以很好地处理它们，但对于Shopify，当CSS中有url()函数时，路径必须类似于{{- 'file-name.ext' | asset_url -}}。CSS包本身必须类似于bundle.css.liquid。这很好，就像复制资产一样，一切都像预期的那样工作。以下是webpack配置：

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更改。这里是postcss配置：

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有点奇怪

您可以查看完整的示例here

       {
                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' },
                ]
            }