我正在寻求关于如何设置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
部分分离出来放在单独的文件中(导入模块),如mix文档所述: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);
,并且 - 获取这个 - url-loader
带着jpg文件,在public_html/images文件夹中给我一个名为“logo.jpg”的文件,它实际上不是jpg,而是包含Base64代码的文本文件.... :/如何将该Base 64代码写入样式表中?!