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'
]
}
}
}
add'~'before '@' , like blow
background-image: url("~@/assets/images/banner.png")
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,
}
}
}
}
};