webpack - Laravel 混合 : config to convert images to base 64

Question

我正在寻找一些关于如何设置 Laravel 混合以查找特定阈值大小下的图像 Assets 并将它们在样式表中重新编码为 Base 64 字符串的指针。我可以使用 url-loader 通过 Webpack 实现此目的，但我正在努力让配置在我的 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 (参见底部的“使用”部分)。结果相同:它编译没有错误，但根本不起作用。

最后，我也尝试过使用 this Post CSS plugin但是在编译时它给了我与依赖版本相关的错误(我认为这现在已经过时了)。

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

谢谢

编辑
我发现我使用的是图像的绝对路径，因此 Mix 忽略了它们，根据 the docs .如果我更改为相对路径，则 Mix 将 css 输出为 background-image: url(/images/logo.jpg?dab783c3f2e3b389830733b050848c8a);并且- 得到这个- url-loader获取 jpg 文件，并在 public_html/images 文件夹中给我一个名为“logo.jpg”的文件，它根本不是 jpg，而是一个包含 Base64 代码的文本文件......:/

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

Answer 1

mix.override(function (webpackConfig) {}) 

... 将在 Mix 完全生成 webpack 配置对象后触发。
也许在这里尝试删除他们的文件加载器并添加您的设置。