En la parte <style> , quiero usar @ para la ruta de background-image como se muestra a continuación:
background-image: url("@/assets/images/banner.png");
Sin embargo, se produce un error:
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& ¿Cómo puedo resolverlo? Uso vue-cli para generar la aplicación.
vue.config.js
module.exports = { outputDir : 'public', runtimeCompiler: true, pluginOptions: { webpack: { dir: [ './webpack' ] } } }agregar '~' antes de '@', como soplar
background-image: url("~@/assets/images/banner.png")Tuve el mismo problema en una configuración de vue + webpack. Finalmente, terminé usando resolve-url-loader para webpack, lo cual es genial (ver aquí https://www.npmjs.com/package/resolve-url-loader )
npm install resolve-url-loader --save-dev¡Para usarlo correctamente, debe cargarse entre sass-loader y css-loader! Además, los mapas de origen son necesarios para los cargadores que preceden a resolve-url-loader.
Para lograr eso, mi vue.config.js se ve así:
.... 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, } } } } };