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

【问题标题】：How can I setting CSS background in vue-cli 3?如何在 vue-cli 3 中设置 CSS 背景？
【发布时间】：2020-06-07 18:13:31
【问题描述】：

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

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

我的项目树。

【问题讨论】：

标签： javascript vue.js webpack frontend vue-cli

【解决方案1】：

你的 url 不是相对或 webpack url，它必须是双引号

如果你想使用相对 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");

【讨论】：

谢谢您，先生。我标记了 css background: url("~@/style/images/close.png").