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

Posted 2023-02-21

【中文标题】尝试使用 SVG 作为背景时模块解析失败

【英文标题】：Module parsing failed while trying to use SVG as background

【发布时间】：2019-04-28 04:55:46

【问题描述】：

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

错误：

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"
   
   >
  <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 被用作按钮背景吗？

【参考方案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'
                
            
        
    ]