加载 svg 作为路径

Question

我通过 CLI 使用 webpack，例如 webpack --watch。 目标是用 SASS 编译 JS 并放入一些单独的 html 页面。

我的 sass 中有一些指向 svg 文件的链接，如下所示：

label {
    background: url(../images/checkbox.svg);
    }

问题是编译后我从来没有在浏览器中得到它。我有以下情况：

1. 如果我使用 svg-loader 编译它，在浏览器中我看到编译后的 css 是这样的： background: url([object Object]);

Here is suggested 改为使用svg-url-loader。

1. 如果我使用提到的 svg-url-loader，我的整个页面 css 都搞砸了，这使得浏览器显示原始文本而不是样式页面。
2. 如果我使用file-loader，我会将css编译到后台：

background: url(37efc0ccedf6fe109636ad1416c29425.svg)

当我将生成的 bundle.js 放到其他地方时，我不喜欢复制我已经拥有的一些文件。

4. 如果我使用raw-loader，我会在 url(...) 中得到一些 xml 而不是文件名，这不起作用，在 css 中显示“错误的属性值”错误。 我很乐意获得常规路径而不是所有这些东西，例如

background: url(../images/checkbox.svg);

那么在我的情况下处理 svg 的正确方法是什么？谢谢。

Answer 1

好的，我找到了解决方案：

    {
        test: /\.svg$/,
        loader: 'file?name=/resources/[path][name].[ext]'
    },
    {
        test: /\.png$/,
        loader: 'file?name=/resources/[path][name].[ext]'
    }

这种方式加载器保留名称和路径，并预先添加额外的/resources/folder。