Сбой при разборе модуля при попытке использовать SVG в качестве фона - PullRequest
Новая
       82

Сбой при разборе модуля при попытке использовать SVG в качестве фона

0 голосов
/ 26 ноября 2018

Я пытаюсь установить SVG в качестве фона для кнопки через Sass, но я получаю следующую ошибку.Я использую веб-пакет для создания веб-приложения.

Ошибка: 

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"
...

Настройка My 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: 

  "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 Ответ

0 голосов
/ 17 апреля 2019

Вы должны указать Webpack загружать файлы SVG.Вы можете использовать загрузчик Webpack с именем svg-url-loader , который преобразует SVG в строку DataUrl в кодировке utf-8.

После добавления его в качестве зависимости в вашем проекте вы можете настроить его в своем списке загрузчиков Webpack, как показано ниже: 

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