• 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