Laravel mix：将图像转换为 Base 64 的配置

Question

我正在寻找一些关于如何设置 Laravel mix 以查找特定阈值大小下的图像资源并将其在样式表中重新编码为 Base 64 字符串的指示。我可以使用 Webpack 来实现这一点url-loader，但我很难让配置在我的 Mix 配置中工作。我尝试过的：

const mix = require('laravel-mix');

mix.setPublicPath('public_html/');
mix.js('resources/uxmaps/js/app.js', 'uxmaps/js/app.js').version()
.webpackConfig({
        module: {
            rules: [
{
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192,
                        outputPath: 'images'
                    },
                  },
                ],
}
            ]
        }
    })
   .sass('resources/sass/app.scss', 'css/main.css')

编译没有错误，但它根本不起作用；例如，我的 sass 文件中的背景图像background-image: url(/assets/logo.jpg);（3kb）在输出的 css 中保持原样。

其次，我还尝试url-loader根据混合文档将配置部分分离到一个单独的文件（导入的模块）中：https://laravel-mix.com/docs/5.0/extending-mix（请参阅“用法”部分）在底部）。结果相同：编译没有错误，但根本不起作用。

最后，我还尝试使用Post CSS 插件执行此操作，但在编译时它给了我与依赖项版本相关的错误（我认为这现在已经过时了）。

有任何关于为什么此代码无法正常工作的指示，或者任何其他方法可以使用 Laravel mix 将图像转换为内联 Base 64 吗？

谢谢

编辑 我发现我正在使用图像的绝对路径，因此 Mix 根据文档忽略它们。如果我更改为相对路径，则 Mix 将 css 输出为background-image: url(/images/logo.jpg?dab783c3f2e3b389830733b050848c8a);- get this-url-loader获取 jpg 文件，并在 public_html/images 文件夹中为我提供一个名为“logo.jpg”的文件，该文件根本不是 jpg ，但是包含 Base64 代码的文本文件....：/

如何将 Base 64 代码写入样式表？！

Answer 1

mix.override(function (webpackConfig) {}) 

...一旦Mix完全生成了webpack 配置对象，就会触发。

也许在这里尝试删除他们的文件加载器并添加您的设置。