How can I setting CSS background in vue-cli 3?

Question

How can I setting CSS background in vue-cli 3? my vue.config.js is this. I have setted publicPath is it?

js

const path = require("path");
module.exports = {
  devServer: {
    port: 8081,
    overlay: {
      warnings: true,
      errors: true
    }
  },
  publicPath: "./"
};

my css

button.close {
    background: url(/src/style/images/close.png);
    font-size: 0px;
    border: 0px;
    width: 20px;
    height: 20px;

    &.modal {
      position: absolute;
      top: 2px;
      left: -38px;
      box-shadow: none;
    }
  }

my project tree.

Answer 1

your url is not a relative or webpack url , and it has to be in double quote

if you want to use relative url it has to be url("../style/images/close.png");

if you want to use webpack

in vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set("@", resolve("src"))
  }
}

in css:

background: url("@/style/images/close.png");