I have a problem when in sass files there are styles with such code: app.scss

body { background: url(/img/test.png) no-repeat; }

app.js

 import './body.scss'; /* .. js code */

Then he is looking for this picture relative to app.js, but I don’t need it, and I want to prohibit

app.scss

 body { background: url(~/img/test.png) no-repeat; }

But then, the problem is different.

If we have a project in the root directory and we run index.html so localhost: 8080

Then everything is fine

And if we move the project to the context folder and connect to our index.html so localhost: 8080 / context

Now the problem, the fact is that webpack substitutes css styles like this:

 body { background: url(img/test.png) no-repeat; }

And the browser writes an error, because it is trying to find a picture at this address localhost: 8080 / img / test.png Although I downloaded the page like localhost: 8080 / context

Here is the webpack configuration:

 module.exports = { context: __dirname, // точка входа в приложение entry: { // точки входа core: './angular/vendor.js', app: './angular/app.module.js' }, output: { // выходные файлы path: '../webapp/js/', publicPath: '/js/', filename: '[name].js', library: '[name]' }, module: { loaders: [ { // используем ES6 to ES5 test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', // 'babel-loader' is also a legal name to reference query: { presets: ['es2015'], compact : false } }, { test: /\.html$/, loader: 'html' }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap'] } ] }, };

    0