title: How to force CSS urls to respect webpack's publicPath setting?
body: <p>my angular app ends up being deployed to web server with different virtual paths such as:</p>
  
  <pre><code>http://website.com/app1/
  http://website.com/app2/
  </code></pre>
  
  <p>To get them both work properly, at the build stage I change angular's <code>&lt;base href=&gt;</code> and webpack's <code>publicUrl</code> options to match specific virtual path <code>app1</code> or <code>app2</code>.</p>
  
  <p>The urls in my <code>index.html</code> are properly changed from 
  <code>&lt;img src='hello.png'/&gt;</code> to <code>&lt;img src='app1/hello.png'/&gt;</code> but the urls inside the css and sass are not changed at all.</p>
  
  <p>I use <code>style-loader</code>, <code>css-loader</code> and <code>sass-loader</code> plugins like that:</p>
  
  <pre><code>        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
            include: [helpers.root('src', 'styles')],
          },
          {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: [helpers.root('src', 'styles')]
          }
  </code></pre>
  
  <p>And lets say my css is:</p>
  
  <pre><code>body {
    background-image: url(bg.png);
  }
  </code></pre>
  
  <p>Can I force webpack to add <code>publicUrl</code> to <code>bg.png</code> and load it from <code>url(app1/bg.png)</code>?</p>
  
  <p>UPD:
  There is no way to use Angular CLI</p>