title: Webpack and angular2 not builiding background-image from css
body: <p>I've set a project using Angular2 -> Webpack documentation:
  <a href="https://angular.io/docs/ts/latest/guide/webpack.html#!#top" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/webpack.html#!#top</a></p>
  
  <p>The problem is that the images from .css files are not build, in the browser I get 404 because they are not present/built in the /dist/assets folder. </p>
  
  <p>I don't want to use absolute paths and place them manually in dist/assets/.. .I already have them in /public/images/..</p>
  
  <p>I want to use relative paths and hashes that webpack automatically creates, and let webpack load them in /dist/assets/..</p>
  
  <p>the .css file looks like this:</p>
  
  <pre><code>  background: url('../../../public/images/randomImage.png') center no-repeat;
  </code></pre>
  
  <p>webpack.common.js:</p>
  
  <pre><code>var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var helpers = require('./helpers');
  
  module.exports = {
      entry: {
          'polyfills': './src/polyfills.ts',
          'vendor': './src/vendor.ts',
          'app': './src/main.ts'
      },
  
      resolve: {
          extensions: ['', '.ts', '.js']
      },
  
      module: {
          loaders: [{
                  test: /\.ts$/,
                  loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                  exclude: /node_modules/
              }, {
                  test: /\.html$/,
                  loader: 'html'
              }, {
                  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                  loader: 'file?name=assets/[name].[hash].[ext]'
              },
              {
                  test: /\.css$/,
                  exclude: helpers.root('src', 'app'),
                  loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
              },
  
              {
                  test: /\.css$/,
                  include: helpers.root('src', 'app'),
                  loader: 'css-to-string-loader!css-loader'
              },
              // {
              //     test: /\.css$/,
              //     include: helpers.root('src', 'app'),
              //     loader: 'raw-loader'
              // },
          ]
      },
  
      plugins: [
          new webpack.optimize.CommonsChunkPlugin({
              name: ['app', 'vendor', 'polyfills']
          }),
  
          new HtmlWebpackPlugin({
              template: 'src/index.html'
          }),
          new webpack.ProvidePlugin({
              jQuery: 'jquery',
              $: 'jquery',
              jquery: 'jquery'
          })
      ]
  };
  </code></pre>
  
  <p>webpack.prod.js</p>
  
  <pre><code>var webpack = require('webpack');
  var webpackMerge = require('webpack-merge');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var commonConfig = require('./webpack.common.js');
  var helpers = require('./helpers');
  
  const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
  
  module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',
  
    output: {
      path: helpers.root('dist'),
      publicPath: '/',
      filename: '[name].[hash].js',
      chunkFilename: '[id].[hash].chunk.js'
    },
  
    htmlLoader: {
      minimize: false // workaround for ng2
    },
  
    plugins: [
      new webpack.NoErrorsPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
        mangle: {
          keep_fnames: true
        }
      }),
      new ExtractTextPlugin('[name].[hash].css'),
      new webpack.DefinePlugin({
        'process.env': {
          'ENV': JSON.stringify(ENV)
        }
      })
    ]
  });
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>{
    "name": "angular-with-webpack",
    "version": "1.0.0",
    "description": "A webpack starter for Angular",
    "scripts": {
      "start": "webpack-dev-server --inline --progress --port 8080 --compress",
      "test": "karma start",
      "build": "webpack --config config/webpack.prod.js --progress --profile --bail"
    },
    "licenses": [
      {
        "type": "MIT",
        "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
      }
    ],
    "dependencies": {
      "@angular/common": "~2.2.0",
      "@angular/compiler": "~2.2.0",
      "@angular/core": "~2.2.0",
      "@angular/forms": "~2.2.0",
      "@angular/http": "~2.2.0",
      "@angular/platform-browser": "~2.2.0",
      "@angular/platform-browser-dynamic": "~2.2.0",
      "@angular/router": "~3.2.0",
      "core-js": "^2.4.1",
      "jquery": "^3.1.1",
      "rxjs": "5.0.0-beta.12",
      "zone.js": "^0.6.25"
    },
    "devDependencies": {
      "@types/core-js": "^0.9.34",
      "@types/jasmine": "^2.5.35",
      "@types/node": "^6.0.45",
      "angular2-template-loader": "^0.4.0",
      "awesome-typescript-loader": "^2.2.4",
      "css-loader": "^0.25.0",
      "css-to-string-loader": "^0.1.2",
      "extract-text-webpack-plugin": "^1.0.1",
      "file-loader": "^0.8.5",
      "html-loader": "^0.4.3",
      "html-webpack-plugin": "^2.15.0",
      "jasmine-core": "^2.4.1",
      "karma": "^1.2.0",
      "karma-jasmine": "^1.0.2",
      "karma-phantomjs-launcher": "^1.0.2",
      "karma-sourcemap-loader": "^0.3.7",
      "karma-webpack": "^1.8.0",
      "null-loader": "^0.1.1",
      "phantomjs-prebuilt": "^2.1.7",
      "raw-loader": "^0.5.1",
      "rimraf": "^2.5.2",
      "style-loader": "^0.13.1",
      "typescript": "^2.0.3",
      "webpack": "^1.13.0",
      "webpack-dev-server": "^1.14.1",
      "webpack-merge": "^0.14.0"
    }
  }
  </code></pre>
  
  <p>my current solution to solve this was to switch from raw-loader to css-to-string-loader</p>
  
  <p>here's is the code again:</p>
  
  <pre><code>{
      test: /\.css$/,
      include: helpers.root('src', 'app'),
      loader: 'css-to-string-loader!css-loader'
  },
  // {
  //     test: /\.css$/,
  //     include: helpers.root('src', 'app'),
  //     loader: 'raw-loader'
  // },
  </code></pre>
  
  <p>Is it okey ? are there any other solutions ? </p>