Question

我正在通过webpack的url-loader来在scss中加载svg文件。其中一些已转换为Base64并正确加载，另一些则返回“ undefined”作为其网址。

这在使用Webpack捆绑项目的Polymer环境中运行。

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”都可以正常工作，并且可以按预期生成svg文件的Base64编码的字符串。

“ RIGHT_AND_DOWN”为两个网址均返回“ http://localhost:3000/undefined”。

网址加载器为SVG返回“未定义”

0 个答案: