title: Webpack - different font path for build and production css in the less-loader
body: <p>I'm trying to create an CSS from LESS with webpack. My source folder have following hierarchy:</p>
  <pre>
  fonts
    desyrel
      desyrel_-webfont.woff
  less
    ds-handwritten.less
  </pre>
  <p>Content of less file include relative font path, which will be used in the production</p>
  <pre class="lang-css prettyprint-override"><code>
  @charset &quot;utf-8&quot;;
  
  @font-face {
    font-family: 'desyrelregular';
    src: url('/www/fonts/desyrel/desyrel_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  //DS hand written
  .ds-hw { font-family: 'desyrelregular', sans-serif !important; }
  </code></pre>
  <p>My entry script is following:</p>
  <pre class="lang-js prettyprint-override"><code>import 'ds-less/ds-handwritten.less';
  </code></pre>
  <p>When I'm trying to run the webpack script, I'm receiving following error:</p>
  <blockquote>
  <p>Module build failed (from
  ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from
  ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve
  '/www/fonts/desyrel/desyrel_-webfont.woff' in ''</p>
  </blockquote>
  <p>How can I inform webpack, that the relative path of font '/www/fonts/desyrel/desyrel_-webfont.woff' points to font from source path: 'src/fonts/desyrel/desyrel_-webfont.woff'?</p>
  <p>I tried to handle the issue with file-loader combined with resolve-url-loader (following the hint from official docu <a href="https://webpack.js.org/loaders/sass-loader/#problems-with-url" rel="nofollow noreferrer">https://webpack.js.org/loaders/sass-loader/#problems-with-url</a>), but without success.</p>
  <pre class="lang-json prettyprint-override"><code>    module: {
          rules: [
              {
                  test: /\.(ttf|eot|woff|woff2|svg)$/,
                  include: path.resolve(__dirname, './src/fonts'),
                  use: {
                      loader: 'file-loader',
                      options: {
                          name: '[name].[ext]',
                          outputPath: 'www/fonts/',
                          esModule: false
                      },
                  },
              },
              {
                  test: /\.less$/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: MiniCssExtractPlugin.loader,
                      },
                      {
                          loader: 'css-loader',
                      },
                      {
                          loader: 'resolve-url-loader',
                      },
                      {
                          loader: 'less-loader',
                          options: {
                              lessOptions: {
                                  strictMath: true,
                              },
                          }
                      },
                  ],
              },
          ]
      },
  </code></pre>