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'; - 儘管我不確定它是否會保持符合標準）