如何在vue-cli 3中设置CSS背景？

Question

如何在vue-cli 3中设置CSS背景？我的vue.config.js是这个。我已经设置了publicPath吗？

js

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

我的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;
    }
  }

我的项目树。

Answer 1

您的网址不是相对网址或webpack网址，必须用双引号引起来

如果要使用相对URL，则必须为url("../style/images/close.png");

如果您想使用webpack

在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"))
  }
}
在CSS中：

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