vue项目sass文件找不到css背景图片:weppack报路径出错
Author:zhoulujun Date:
vue文件中,引入纯*.css *.scss 文件无问题。里面有图片,就提示图片路径出错。
图片路径都是使用的相对路径。在react 项目中,印象中貌似没有发现这种问题。
报错情形
在vue文件中,在style里面引入sccs文件,且scss文件含有图片等资源文件,比如
<style> @import './path/demo.scss' </style>
样式文件中
.test { background-image:url("../ims/xxx.png"); }
原因是:当在scss中引用图片时,编译报错,loader出错。原因是路径解析错误。
解决方案:
在mian.js直接引入scss
在vue文件中引入,借助webpack的`~`前缀
这里可以读一下,《关于前端的路径资源与webpack打包URL转换规则:webpack中 ~符号》、《再谈Node.js的模块加载方式+机制与运行原理 》
转载本站文章《vue项目sass文件找不到css背景图片:weppack报路径出错》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8234.html
延伸阅读:
- webpack4.x搭建vue工程,各种报错
- vue-loader与vue-cli webpack配置笔记:vue-config.js笔记 替换loader
- VueRouter和ReactRouter原理:$router与$route区别,见习React Router 4.0
- 数组循环v-model绑定报错You are binding v-model directly to
-
从vue-router报Unknown custom element:
看Vue.use&install - vue element-ui loading延迟出现loading效果—elementUI设置loading
- vue中methods/watch/computed对比分析,watch及computed原理挖掘
- 前端组件化:vue组件设计思想与遵从原则
- Vue中scoped原理以及带来的样式问题
- vue router warnging:Expected indentation of 10 spaces but found 12
- Slot:HTML5-template与vue-template的区别,Vue中template与slot异同
- vue.directive:vue自定义指令钩子函数——从源码解读
- Vue Router(0):params和query的区别+重定向参数转发+别名作用
- Vue依赖注入:provide/inject
- 详解v-model:v-model双向绑定与Vue自定义组件设置
- vue源码 源码解读
- vue watch对象键值说明,immediate属性详解
- vue mixins混合使用Vue.extend()
- vue router keep-alive 保证回退页面不刷新
- vue、react中key有何区别?循环渲染优化与Vue.delete删除
- vue编译原理(1):vue-loader浅析
- 梳理vue双向绑定的实现原理
- vue2.x入坑总结—回顾对比angularJS/React