title: Webpack relative css url() with file-loader / css-loader
body: <p>Im quite new to webpack/npm and i'm trying to get my head around how to work with css urls in other project dependancies.</p>
  
  <p><strong>Folder structure</strong></p>
  
  <pre><code>src
    fonts/
    scss/
      app.scss
    js/
      app.js
    img/
    index.html
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var path = require('path');
  var extractPlugin = require('extract-text-webpack-plugin');
  var cleanWebpackPlugin = require('clean-webpack-plugin');
  var htmlWebpackPlugin = require('html-webpack-plugin');
  var webpack = require("webpack");
  
  module.exports = {
      entry: './src/js/app.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'js/app.js'
      },
      devServer: {
          stats: 'errors-only',
          compress: true,
          open: true,
          port: 9000
      },
      module: {
  
          rules: [
  
              // ES6 -&gt; ES5 transpiler
  
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['es2015']
                      }
                  }
              }, 
  
              // SCSS to CSS -&gt; Autoprefix -&gt; Load CSS
  
              {
                  test: /\.(scss|css)$/,
                  use: extractPlugin.extract({
                      use: [
                          'css-loader',
                          {
                              loader: 'postcss-loader', 
                              options: { 
                                  plugins: (loader) =&gt; [require('autoprefixer')()]
                              }
                          },
                          'sass-loader'
                      ]
                  })
              },
  
              // HTML Loader
              {
                  test: /\.html$/,
                  use: ['html-loader']
              },
  
              // Image Loader
              {
                  test: /\.(jpg|png|svg|gif)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              outputPath: 'img/',
                              name: '[name].[ext]'
                          }
                      }
                  ]
              },
              // Font Loader
              {
                  test: /\.(eot|ttf|woff)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              outputPath: 'fonts/',
                              name: '[name].[ext]'
                          }
                      }
                  ]
              }
  
  
          ]
  
      }, 
      plugins: [
          new extractPlugin({filename: 'scss/app.css'}),
          new cleanWebpackPlugin(['dist']),
          new htmlWebpackPlugin({ template: 'src/index.html' }),
          new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
      ]
  };
  </code></pre>
  
  <p>I've successfully included lightGallery in my project like so:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import 'lightgallery';
  </code></pre>
  
  <p><strong>app.scss</strong></p>
  
  <pre><code>@import '~lightgallery/dist/css/lightgallery.css';
  </code></pre>
  
  <p>The light gallery stylesheet references fonts which i'm successfully loading into the <code>fonts/</code> using the webpack <code>file-loader</code></p>
  
  <p>My problem is that the built css file is trying to reference the fonts relative from the scss folder instead of my root.</p>
  
  <p>ie: <code>http://localhost:9000/scss/img/loading.gif</code></p>
  
  <p>I need all assets linked to from css to resolve from my root dir</p>
  
  <p>ie <code>http://localhost:9000/img/loading.gif</code></p>
  
  <p>Is there anyway i can configure my css-loader to prepend all url's with a <code>/</code> ?</p>
  
  <p>Help!</p>