svg - webpack css-loader 忽略 & svg 定义 url

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');
}

我在样式中使用标记是因为我不想弄乱我正在使用的图表库，但 css 加载器会在 URL 上中断。

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

Answer 1

你用--relative-url选项编译吗？如果是这样，则结果是预期的，因为此选项明确规定将任何更改url为相对于所url使用的文件（在这种特殊情况下，Less 无法知道此marker-midurl 与生成的 CSS 文件完全无关）。

因此，作为一种解决方法，您需要选择其中之一：

• 关闭--relative-url_
• 隐藏url更少（即marker-mid: ~"url(#line-marker)";：）
• 完全从那里删除url（即：marker-mid: '#line-marker';-尽管我不确定这种方式是否会保持符合标准）

Answer 2

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

如果引用是在不在用于处理的 less 入口点的顶层的文件中进行的，则 url 将被前置。

我在 GitHub 上报告了这个问题： https ://github.com/less/less.js/issues/2320

作为一种解决方法，您可以在顶级文件夹的较少文件中包含这些规则，并且 uri 将保持不变。