polymer-webpack-loader creates an error on loading shared styles with (url)

Question

I am having some errors when importing a shared-theme as part of one of my components. Here's the example shared-theme file

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

And the error i get is on using 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.

What type of loader will I use? If I use a file-loader, it creates an error on the program where Polymer is missing.

Answer 1

I figure it out. Sorry for the bother. But the answer is just add the file-loader/image-webpack-loader

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' }
        ]
      }
    ]
  }