html - 加载 svg 作为路径

Question

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

我的 sass 中有一些指向 svg 文件的链接，看起来像这样:

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

问题是我在编译后一直没有在浏览器中获取它。我有以下情况:

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

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

1. 如果我使用提到的 svg-url-loader，整个页面的 css 就会乱七八糟，这会使浏览器显示原始文本而不是样式化页面。
2. 如果我使用 file-loader，我会将 css 编译到后台:

背景:url(37efc0ccedf6fe109636ad1416c29425.svg)

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

1. 如果我使用 raw-loader，我会在 url(...) 中得到一些 xml 而不是文件名，这不起作用，在CSS。我很乐意只获得常规路径而不是所有这些东西，比如

背景: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/ 文件夹。