Vue - 如何在背景图片网址中使用@

Question

In <style> part, I want to use @ for the path for background-image like below:

background-image: url("@/assets/images/banner.png");

However, error occurs:

This relative module was not found:

* ./@/assets/images/banner.png in ./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/home/index.vue?vue&type=style&index=0&id=5b685826&scoped=true&lang=scss&

How can I resolve it? I use vue-cli to generate the application.

vue.config.js

module.exports = {
  outputDir : 'public',
  runtimeCompiler: true,
  pluginOptions: {
    webpack: {
      dir: [
        './webpack'
      ]
    }
  }
}

Answer 1

在 '@' 前加上 '~' ，就像吹一样

background-image: url("~@/assets/images/banner.png")

Answer 2

I had the same issue in a vue + webpack setup. Finally, I ended up using the resolve-url-loader for webpack which is great (see here https://www.npmjs.com/package/resolve-url-loader )

npm install resolve-url-loader --save-dev

To correctly use it, it must be loaded between sass-loader and css-loader! Also, source-maps are required for loaders preceding resolve-url-loader.

To achieve that, my vue.config.js looks like:

 .... module.exports = { .... chainWebpack: config => { .... config.module .rule('scss') .oneOf('vue') .use('resolve-url-loader') .loader('resolve-url-loader').options({ keepQuery: true }) .before('sass-loader'); }, css: { loaderOptions: { sass: { sourceMap: true, } } } } };