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.

Jake Lam · Accepted Answer · 2020-02-24 09:37:45Z

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");

answered Feb 24, 2020 at 9:37

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

garam hyeon Over a year ago

thank you sir. and I marked css background: url("~@/style/images/close.png").

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related