vue项目sass文件找不到css背景图片：weppack报路径出错

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