title: Webpack 4 - Style-loader/url not working
body: <p>I'm having my webpack set up and it's running all fine, but in development it is serving my compiled scss stylesheets inline instead of using an URL.</p>
  
  <pre><code>module: {
      rules: [
          {
              test: /\.scss$/,
              use: [
                  { loader: "style-loader"},
                  { loader: "css-loader" },
                  { loader: 'postcss-loader',
                      options: {
                          plugins: () =&gt; [require('autoprefixer')]
                      }
                  },
                  { loader: "sass-loader" }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>So I grabbed the <a href="https://github.com/webpack-contrib/style-loader#url" rel="nofollow noreferrer">docs</a> and read up on how to use a single <code>CSS</code> file instead. I updated my webpack config to the following and since all loaders are running in reverse order this should be working;</p>
  
  <pre><code>module: {
      rules: [
          {
              test: /\.scss$/,
              use: [
                  { loader: "style-loader/url"}, 
                  { loader: "file-loader" },
                  { loader: "css-loader" },
                  { loader: 'postcss-loader',
                      options: {
                          plugins: () =&gt; [require('autoprefixer')]
                      }
                  },
                  { loader: "sass-loader" }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>It results in no errors, and inserts the following stylesheet into my header;</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="6bbafb3b6c677b38556511efc7391506.scss"&gt;
  </code></pre>
  
  <p>As you can see it's creating an scss file, whereas I was expecting a .css file. I tried moving the file-loader around but that didn't work either and resulted in several crashes. Any idea how to turn this into a working css file?</p>
  
  <p>I <strong>can't</strong> use mini-css-extract in my dev env since I'm using HMR. I already got this working on my prod env.</p>
  
  <p>Update: <em>When removing css-loader it compiles and shows my css applied to the page. But when I inspect the elements everything is on line 1 and the file it refers to can not be found</em></p>
  
  <p>I'm importing my css like this in <code>index.js</code> by the way;</p>
  
  <pre><code>import '../css/styles.scss';
  </code></pre>