title: Using relative paths in SASS background images
body: <p>I'm trying to get background images to work in my Angular project's SASS when I don't know where the application root will be.  For example, the app's home page could be:</p>
  
  <pre><code>localhost:9000/home
  </code></pre>
  
  <p>or</p>
  
  <pre><code>localhost:9000/foo/home
  </code></pre>
  
  <p>or</p>
  
  <pre><code>localhost:9000/bar/home
  </code></pre>
  
  <p>I figured I could address this by just making the paths in my background-image properties relative, like this:</p>
  
  <pre><code>div {
      background-image: url("assets/smiley.png");
  }
  </code></pre>
  
  <p>However, that doesn't work. When I compile the app, it can't find the assets.  In the console, it says:</p>
  
  <pre><code>Error: Can't resolve './assets/smiley.png'
  </code></pre>
  
  <p>It gives me this same message whether my background-image url value starts with ./ or not.  But even ./ I imagine should work.</p>
  
  <p>What DOES work is if I hard-code the path into the background-image property, making the path ABSOLUTE, like so:</p>
  
  <pre><code>div {
      background-image: url("/foo/assets/smiley.png");
  }
  </code></pre>
  
  <p>However, that's not an option, since I don't know if the app root will be at /foo/ or /bar/ or something else.</p>
  
  <p>Another thing that works is using the --base-href option of ng build to hard-code the path, like so:</p>
  
  <pre><code>ng build --base-href /foo/
  </code></pre>
  
  <p>But if possible, I'd really like to accomplish this with code changes that don't involve passing parameters to the ng build command on a build-by-build basis.</p>
  
  <p>Here is my Webpack Config located at node_modules/@angular/cli/models/webpack-config.js.  Is that the right file?  Sorry if it's not - I'm pretty unfamiliar with webpack:</p>
  
  <pre><code>/**
   * Adapted from angular2-webpack-starter
   */
  
  const helpers = require('./config/helpers'),
      webpack = require('webpack');
  
  /**
   * Webpack Plugins
   */
  const ProvidePlugin = require('webpack/lib/ProvidePlugin');
  const DefinePlugin = require('webpack/lib/DefinePlugin');
  const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
  
  module.exports = {
      devtool: 'inline-source-map',
  
      resolve: {
          extensions: ['.ts', '.js']
      },
  
      entry: helpers.root('ng2-translate.ts'),
  
      output: {
          path: helpers.root('bundles'),
          publicPath: '/',
          filename: 'ng2-translate.umd.js',
          libraryTarget: 'umd',
          library: 'ng2-translate'
      },
  
      // require those dependencies but don't bundle them
      externals: [/^\@angular\//, /^rxjs\//],
  
      module: {
          rules: [{
              enforce: 'pre',
              test: /\.ts$/,
              loader: 'tslint-loader',
              exclude: [helpers.root('node_modules')]
          }, {
              test: /\.ts$/,
              loader: 'awesome-typescript-loader?declaration=false',
              exclude: [/\.e2e\.ts$/]
          }]
      },
  
      plugins: [
          // fix the warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
          new webpack.ContextReplacementPlugin(
              /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
              helpers.root('./src')
          ),
  
          new webpack.LoaderOptionsPlugin({
              options: {
                  tslintLoader: {
                      emitErrors: false,
                      failOnHint: false
                  }
              }
          })
      ]
  };
  </code></pre>