webpack css-loader忽略& svg定义urls

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

因此，这似乎是一个less.js问题。

如果引用的文件不在用于处理的less入口点的顶层，则url将被放在前面。

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

作为一种解决办法，您可以将这些规则放在顶层文件夹中的较少文件中，而uri将保持不变。

Answer 2

是否使用--relative-url选项进行编译？如果是这样的话，结果是意料之中的，因为这个选项明确规定要将任何url更改为与url使用的文件相关(在这种特定情况下，Less无法知道这个marker-mid url与生成的CSS文件完全没有关系)。

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

• 关闭--relative-url
• url url from Less (即:从那里完全隐藏代码(即：marker-mid: '#line-marker'; -尽管我不确定这种方式是否会符合标准)

<代码>F216