title: Resolving relative urls in nested style files with postcss & scss
body: <p>I'm using postcss with scss synthax to organize styles in project. The simplified structure listed below:</p>
  
  <pre><code>client
    media
      images
        image.png
    styles
      index.scss
      components
        component1.scss
  </code></pre>
  
  <p>Entry point for Webpack loaders is client/styles/index.scss.</p>
  
  <p>If I define some style with url() statement with relative path to image.png - like url('../media/images/image.png') (for example - in background-image property) in index.scss it will be resolved fine.</p>
  
  <p>But if I do same thing in nested style file - styles/components/component1.scss - url('../../media/images/image.png') which is imported by index.scss — Webpack will throw an error: </p>
  
  <pre><code>Module not found: Error: Can't resolve '../../media/images/image.png' in '/Users/anubis/Projects/Jackal/client/styles'
  </code></pre>
  
  <p>Seems that loader treat relative urls in all nested files with entry style file path. How to change this behavior?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    test: /\.scss$/,
    use: [
      { loader: 'style-loader' },
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          sourceMap: true,
          minimize: true
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          parser: scssParser,
          sourceMap: true,
          plugins: () =&gt; [
            require('precss')({
              import: {
                resolve: styleFileResolver
              }
            }),
            require('postcss-font-magician')({
              hosted: ['./client/media/fonts/OpenSans']
            }),
            require('postcss-short')(),
            require('postcss-cssnext')(),
            require('postcss-utilities')()
          ]
        }
      }
    ]
  }</code></pre>
  </div>
  </div>
  </p>