Using relative paths in SASS background images - css

Question

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:
localhost:9000/home
or
localhost:9000/foo/home
or
localhost:9000/bar/home
I figured I could address this by just making the paths in my background-image properties relative, like this:
div {
background-image: url("assets/smiley.png");
}
However, that doesn't work. When I compile the app, it can't find the assets. In the console, it says:
Error: Can't resolve './assets/smiley.png'
It gives me this same message whether my background-image url value starts with ./ or not. But even ./ I imagine should work.
What DOES work is if I hard-code the path into the background-image property, making the path ABSOLUTE, like so:
div {
background-image: url("/foo/assets/smiley.png");
}
However, that's not an option, since I don't know if the app root will be at /foo/ or /bar/ or something else.
Another thing that works is using the --base-href option of ng build to hard-code the path, like so:
ng build --base-href /foo/
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.
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:
/**
* 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
}
}
})
]
};