带自定义网页配置的Angular build中作为base64的内联图像

我有一个Angular项目，它只包含web组件。为了包含组件的资产（仅图像），我想使用一个自定义的webpack配置，以便使用

url加载程序

或类似的工具将组件中使用的图像转换为内联base64图像

我成功地设置了

@angular builders/custom webpack

，并验证它是否加载了我的

webpack.config.js

。经过多次尝试和错误后，目前看起来是这样的（但仍然不起作用）：

//您的自定义网页包配置
module.exports=config=>{
//我验证了加载图像的规则是数组的第一个元素
config.module.rules.shift（）；
config.module.rules=[
…config.module.rules，
{
测试：/\（eot | svg | cur | jpg | png | webp | gif | otf | ttf | woff | woff2 | ani）$/，
加载器：“base64内联加载器”，
选项：{
名称：'[name].[ext]'
}
}
];
返回配置；
};

我试着只放置一个配置选项，因为它应该自动合并，但这不起作用，所以我编写了这个函数来覆盖默认的角度图像加载程序

编辑：我发现我可以通过如下代码专门使用webpack

url加载器

：

声明const require；
@组件（{…}）
导出类组件{
logoUrl=require（'！！url loader！logo.svg'）；
}

这种方法很有效，而且可能是解决这一问题的一种方法，因为它只用于只使用web组件的项目中。 但是，我认为这在我的.scss文件中不起作用，我更愿意在不需要记住库的特殊知识的情况下找到解决方案