svg - 尝试使用 SVG 作为背景时模块解析失败

Question

我试图通过 Sass 将 SVG 设置为按钮的背景，但出现以下错误。我使用 webpack 创建网络应用程序。

错误:

ERROR in ./src/components/Areas/ReportDisplay/button.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <svg
|    xmlns:svg="http://www.w3.org/2000/svg"
...

我的 Sass 设置:

.country {
    background: url(./button.svg);
    background-size: 100% 100%;
}

我的 SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="744.09003"
   height="1052.3622">
  <g
     transform="matrix(8.9893045,0,0,-8.9893045,-789.08414,4880.2518)">
    <path
       d="m 144.81201,454.46436 0,-19.54541 -8.40381,0 0,19.54541 -13.88574,0 0,-21.02832 -8.40381,0 0,21.02832 -13.88672,0 0,-22.51123 -8.4038,0 0,30.13232 67.04394,0 c 0.0117,6.51318 -3.7041,11.43115 -10.52783,11.43115 l -56.08203,0 0,7.62061 c 0,10.45361 8.20215,19.07519 18.7583,19.05224 l 48.84033,-0.10547 c 0.0278,7.21192 -4.18799,11.45557 -11.5166,11.43116 l -56.08203,-0.1875 0,7.6206 c 0,10.46045 8.20996,19.05176 18.7583,19.05176 l 55.5542,0 0,-7.62061 -55.5542,0 c -7.82959,0 -10.36475,-4.56347 -11.36963,-11.33984 l 48.69336,0.0962 c 10.5581,0.021 18.7583,-8.59814 18.7583,-19.05176 l 0,-7.62109 -56.08203,0.10547 c -7.33106,0.0142 -11.54444,-4.20898 -11.5166,-11.43115 l 48.84033,0 c 10.55029,0 18.7583,-8.59229 18.7583,-19.05176 l 0,-25.68359 -8.40381,0 0,18.0625 -13.88672,0 z"
       style="fill:#006633;fill-opacity:0.7;fill-rule:nonzero;stroke:none"
       />
  </g>
</svg>

如果我将来自互联网的 url 设置为按钮 SVG，按钮会成功获取其背景，即:

.country {
    background: url(https://songhay.blob.core.windows.net/shared-styles-svg/akyinkyin.svg);
    background-size: 100% 100%;
}

我预计 Webpack 的解析部分会出错，但我不知道如何解决这个问题。

开发依赖:

  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }

webpack.conf.js 中的模块:

        {
            test: /\.scss$/,
            exclude: /\.global.scss$/,
            use : [
                { loader: "style-loader" },
                { loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }},
                { loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
                { loader: "sass-loader" }
            ]
        },

        {
            test: /\.scss$/,
            include: /\.global.scss$/,
            use : [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
                { loader: "sass-loader" }
            ]
        }

有人知道是什么阻止了本地 SVG 被用作按钮背景吗？

Answer 1

你必须告诉 Webpack 加载 SVG 文件。您可以使用名为 svg-url-loader 的 Webpack 加载程序将 SVG 转换为 utf-8 编码的 DataUrl 字符串。

将其添加为项目的依赖项后，您可以在 Webpack 加载器列表中配置它，如下例所示:

module: {
    rules: [
        {
            test: /\.svg$/,
            use: {
                loader: 'svg-url-loader'
            }
        }
    ]
}

更新(2019 年):svg-url-loader 的最新版本未将其输出用引号引起来 - https://github.com/bhovhannes/svg-url-loader/releases/tag/v3.0.0

module: {
    rules: [
        {
            test: /\.svg$/,
            use: {
                loader: 'svg-url-loader',
                options: {
                    encoding: 'base64'
                }
            }
        }
    ]
}