Laravel mix：将图像转换为 base 64 的配置答案

【问题标题】：Laravel mix: config to convert images to base 64Laravel mix：将图像转换为 base 64 的配置
【发布时间】：2020-02-21 06:51:54
【问题描述】：

我正在寻找一些关于如何设置 Laravel mix 以查找特定阈值大小以下的图像资产并将它们在样式表中重新编码为 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 忽略了它们，就像 the docs 一样。如果我更改为相对路径，则 Mix 将 css 输出为 background-image: url(/images/logo.jpg?dab783c3f2e3b389830733b050848c8a); 并且 - 得到这个 - url-loader 获取 jpg 文件，并在 public_html/images 文件夹中给我一个名为“logo.jpg”的文件，它是根本不是 jpg，而是包含 Base64 代码的文本文件....：/

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

【问题讨论】：

标签： webpack base64 laravel-mix

【解决方案1】：

mix.override(function (webpackConfig) {})

...将在 Mix 完全生成 webpack config 对象后触发。

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

【讨论】：