title: Webpack 4: css-loader + file-loader to add fonts and their stylesheets in the build process
body: <p>Given this setup:</p>
  
  <p><strong>fonts/styles.css</strong></p>
  
  <pre><code>@font-face {
    family: 'MyFont';
    src: url('fonts/myfont.otf');
  }
  </code></pre>
  
  <p>How can I:</p>
  
  <ol>
  <li>in my JS bundle, obtain a reference to the URL of the CSS file, as a string, e.g. <code>[name].[hash].css</code></li>
  <li>the generated CSS file should be a plain CSS file, but with <code>url()</code>s pointing to the generated webfont files?</li>
  </ol>
  
  <p>Something like:</p>
  
  <pre><code>@font-face {
    family: 'MyFont';
    src: url('myfont.dds9394u329d9sa9r8439.otf');
  }
  </code></pre>
  
  <p>I'm trying with:</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>{
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
    loader: 'file-loader',
    include: [/fonts/]
  },
  
  {
    test: /\.css$/,
    use: ['file-loader', 'css-loader'],
    include: [/fonts/]
  }
  </code></pre>
  
  <p><strong>JS file</strong></p>
  
  <pre><code>const myfont = {
    family: 'MyFont',
    stylesheet: require('fonts/styles.css')
  }
  </code></pre>
  
  <p>As per <a href="https://stackoverflow.com/questions/51943367/webpack-4-include-many-json-files-in-output-using-file-loader">a previous question</a>, using <code>file-loader</code> and <code>require()</code> works well to get the URL for the CSS, but  the generated file is not plain CSS.</p>
  
  <p>How can I combine <code>file-loader</code> and <code>css-loader</code> (+ possibly other loaders) to obtain this CSS file? </p>
  
  <p>Thanks!</p>
  
  <p>P.S. I would like to avoid <code>copy-webpack-plugin</code> for this, because I want the CSS / font files to be hashed and addressable in code.</p>