• Home
  • home > webfront > ECMAS > vue >

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

    Author：zhoulujun Date：

    ​在vue文件中，在style里面引入sccs文件，且scss文件含有图片等资源文件，就会报错。原因是，当在scss中引用图片时，编译报错，loader出错。原因是路径解析错误。

    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

    收藏
    上一篇：watch性能优化：vue watch对象键值说明-immediate属性详解
    下一篇：vue mixins、Vue.extend() 、extends使用注意事项笔记
    延伸阅读：