聚合物-webpack-loader 在加载共享样式时创建错误 (URL)

Question

将共享主题作为我的一个组件的一部分导入时，我遇到了一些错误。下面是共享主题文件的示例

<dom-module id="shared-theme">
<template>
<style>
.header {
background: url('repeatable.png') center/contain repeat;
</style>
</template>
</dom-module>

我得到的错误是使用 url(''(...

ERROR in .repeatable.png
Module parse failed: /node_modules/image-webpack-loader/index.js!/repeatable.png 
Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

我将使用哪种类型的加载器？如果我使用文件加载器，它会在缺少 Polymer 的程序上创建错误。

Answer 1

我想通了。很抱歉打扰了。但答案只是添加文件加载器/图像网络包加载器

module: {
rules: [
{
// If you see a file that ends in .html, send it to these loaders.
test: /.html$/,
// This is an example of chained loaders in Webpack.
// Chained loaders run last to first. So it will run
// polymer-webpack-loader, and hand the output to
// babel-loader. This let's us transpile JS in our `<script>` elements.
use: [
{ loader: 'babel-loader' },
{ loader: 'polymer-webpack-loader' }
]
},
{
// If you see a file that ends in .js, just send it to the babel-loader.
test: /.js$/,
use: 'babel-loader'
},
{
test: /.(gif|png|jpe?g|svg)$/i,
use: [
{ loader: 'file-loader' },
{ loader: 'image-webpack-loader' }
]
}
]
}