Adding background form scss doesn't work

[Silver360]

When I try add image as background, picture not showing. My code looks like this.

.bg { background-image: url('../assets/section-packets-bg.png'); }

webpack generate this url url("http://localhost:8080/../../assets/section-packets-bg.png")

[lifenautjoe]

Hi @Silver360 , I'll take a look.

Could you meanwhile try to load it from ./assets/section-packets-bg.png ?

Cheers.

[NathanHealea]

Hi @Silver360 , Give this a try.

npm install --save-dev resolve-url-loader

webpack.dev.js

{
  // translates CSS into CommonJS
  loader: 'css-loader',
  ...
},
{
  loader:'resolve-url-loader',
  option: {
    sourceMap: true
  }
},
{
  // compiles Sass to CSS
  loader: 'sass-loader'
  ..
}
...

In your sass file use a relative path. In the file structure I'm using I have an image directory under styles
styles/index.scss

.bg { background-image: url('img/section-packets-bg.png'); }

[ldraminski]

Hi thanks for replay. When I try install resolve-url-loader I get this message.

[NathanHealea]

@ldraminski,

That message indicated that there are vulnerabilities in the package that you installed.
You can either run npm audit fix or just ignore them.

[annelyse]

Option with a S , if not it doesn't work !

{
loader:'resolve-url-loader',
options: {
sourceMap: true
}
},
{