如何在 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

你的 url 不是 relative 或 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");

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

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

javascript

frontend

webpack

vue.js

vue-cli