webpack css-loader忽略＆svg定义网址

Question

我在使用css-loader的项目中使用WebPack。

在这个项目

SVG元素具有标记定义和这些标记是在样式表如下分配：

标记定义：

<defs> 
    <marker id="line-marker"> 
     <circle cx="6" cy="6" r="5"></circle> 
    </marker> 
</defs> 

标记使用：

path.nv-line { 
    marker-mid: url('#line-marker'); 
} 

我m使用样式中的标记，因为我不想混淆正在使用的图表库，但css加载器在URL上断开。

有没有办法忽略这些规则中的某些URL值或以其他方式防止加载器失败？

Answer 1

所以这似乎是一个less.js问题。

如果引用是在不处于较低入口点顶级的文件中进行处理的，则会预先设置该url。

我汇报了GitHub上的问题： https://github.com/less/less.js/issues/2320

作为一种变通方法，您可以在顶层文件夹在减档这些规则和URI将保持不变。

Answer 2

你用--relative-url选项编译了吗？如果是这样，结果是预期的，因为这个选项明确要求将任何url更改为相对于url中使用的文件（在这种情况下更少不知道这个marker-mid url与生成的CSS文件根本没有关系）。

因此，作为一个变通方法，您需要选择其中的一个：

• 反过来--relative-url断
• 隐藏欠url（即：marker-mid: ~"url(#line-marker)";）
• 从那里都删除url（即： marker-mid: '#line-marker'; - 尽管我不确定它是否会保持符合标准）