Url-загрузчик возвращает "undefined" для svg - PullRequest
Новая
       7

Url-загрузчик возвращает "undefined" для svg

0 голосов
/ 03 июня 2019

Я загружаю svg файлы в свой scss, используя url-загрузчик с webpack. Некоторые из них преобразуются в Base64 и загружаются правильно, другие возвращают "undefined" в качестве URL-адреса.

Это выполняется в среде Polymer с использованием Webpack для объединения проекта.

arrows.scss: 

$arrow-up-right: url("./UP_RIGHT.svg");
$arrow-down-right: url("./DOWN_RIGHT.svg");
$arrow-down: url("./DOWN.svg");
$arrow-left-down: url("./LEFT_DOWN.svg");
$arrow-right-down: url("./RIGHT_DOWN.svg");
$arrow-right: url("./RIGHT.svg");


#field[arrowType=UP_RIGHT] {
    background: $arrow-up-right no-repeat 3px 102% #ffffff;
}

#field[arrowType=DOWN_RIGHT] {
    background: $arrow-down-right no-repeat 3px -3px #ffffff;
}

#field[arrowType=DOWN] {
    background: $arrow-down no-repeat 50% 0 #ffffff;
}

#field[arrowType=LEFT_DOWN] {
    background: $arrow-left-down no-repeat 102% 3px #ffffff;
}

#field[arrowType=RIGHT_DOWN] {
    background: $arrow-right-down no-repeat 0 3px #ffffff;
}

#field[arrowType=RIGHT] {
    background: $arrow-right no-repeat 0 50% #ffffff;
}

#field[arrowType=RIGHT_MULTI] {
    background: $arrow-right no-repeat 0 11% #ffffff;
}

#field[arrowType=RIGHT_AND_DOWN] {
    background: $arrow-right 0 50% no-repeat, $arrow-down no-repeat 50% 0 #ffffff;
}

#field[arrowType=RIGHT_AND_DOWN_MULTI] {
    background: $arrow-right 0 11% no-repeat, $arrow-down no-repeat 50% 0 #ffffff;
}

PolymerElement: 

import {PolymerElement, html} from '@polymer/polymer/polymer-element';

import './arrows.scss';

export class CrosswordField extends PolymerElement {

    static get template() {
        return html`
            <style include="arrows"></style>
            <div id="field" arrowType="RIGHT_AND_DOWN">
            </div>
        `;
    }

}

Загрузчики Webpack: 

        {
          test: /\.css|\.s(c|a)ss$/,
          use: [
            babel,
            {
            loader: 'polymer-css-loader',
            options: {
              minify: true, // defaults to false
              url: false
            },
          }, 'extract-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
                outputPath: 'assets'
              }
            }
          ]
        },

"DOWN" и "RIGHT" работают и генерируют строку в кодировке Base64 файла SVG, как и ожидалось.

"RIGHT_AND_DOWN" возвращает 'http://localhost:3000/undefined' для обоих URL.

...