title: Importing CSS-url from SASS with Webpack
body: <p>I'm working with web components, (specifically <a href="https://github.com/Polymer/lit-element" rel="nofollow noreferrer">lit-element</a>), and I want to share a common stylesheet across several different components. What I am trying to achieve is to get the url of the compiled CSS file when I import it in my JS-component so that I can add it as an external stylesheet in the markup.</p>
  
  <p><strong>component.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import styleUrl from 'url-loader!../styles/placeholder.scss';
  ...
  render(){
      return html`
          &lt;link rel="stylesheet" href="${styleUrl}"&gt;
          ...
      `
  
  }
  </code></pre>
  
  <p>So I want the <code>styleUrl</code> to be the url to the compiled css.</p>
  
  <p>Currently my webpack config looks something like the following
  <strong>Webpack config</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>...
  {
      test: /\.scss$/,
      use: [
          "style-loader",
          "css-loader", 
          "sass-loader"
      ]
  }
  
  </code></pre>