将svg加载为路径(Load svg as path)

 我通过CLI使用webpack，比如webpack --watch 。 目标是用SASS编译JS并放入一些单独的html页面。 
 
 我在我的sass中有一些svg文件的链接，看起来像这样： 
 
label {
    background: url(../images/checkbox.svg);
    }
 
 问题是我在编译后从未在浏览器中获取它。 我有以下情况： 
 
 
 
 如果我使用svg-loader编译它，在浏览器中我看到编译的css是这样的： background: url([object Object]); 
 
 
 建议使用svg-url-loader代替。 
 
 
 
 如果我使用提到的svg-url-loader ，我将整页css搞砸了，这使得浏览器显示原始文本而不是样式页面。 
 
 
 如果我使用file-loader ，我将css编译为后台： 
 
 
 background: url(37efc0ccedf6fe109636ad1416c29425.svg) 
 
 当我把结果bundle.js放到其他地方时，我不满意复制我已经拥有的一些文件。 
 
 
 
 如果我使用raw-loader ，我在url（...）中得到一些xml而不是文件名，这只是不起作用，在css中显示“错误的属性值”错误。 我很乐意获得正常的路径而不是所有的东西，比如 
 
 
 background: url(../images/checkbox.svg); 
 
 那么在我的情况下处理svg的正确方法是什么？ 谢谢。 

I use webpack via CLI, like webpack --watch. Goal is to compile JS with SASS and put in some separate html page.
 
I have some links to svg files in my sass, looking like that:
 
label {
    background: url(../images/checkbox.svg);
    }
 
The problem is that I never get it in the browser after compiling. I have following situations:
 
 
 
If I compile it using svg-loader, in browser I see compiled css is something like that: background: url([object Object]);
 
 
Here is suggested to use svg-url-loader instead. 
 
 
 
If I use mentioned svg-url-loader, I have whole page css messed up which makes browser to show raw text instead of styled page.
 
 
If I use file-loader, I get css compiled to background: 
 
 
background: url(37efc0ccedf6fe109636ad1416c29425.svg)
 
and as I put resulted bundle.js to some other place, I am not happy with copying some files I already have.
 
 
 
If I use raw-loader, I get some xml instead of file name in the url(...), which just doesn't work, showing "wrong property value" error in the css. I would be happy to get just regular path instead of all that things, like 
 
 
background: url(../images/checkbox.svg);
 
So what is correct approach to handle svg in my situation? Thank you.

原文：https://stackoverflow.com/questions/34779370