基于webpack下在vue中使用scss,背景图片的使用

在scss设置背景图片(background-image),在项目webpack打包后,图层路径会增加css文件夹所在路径。
我们希望的情况下,背景图路径应为’static/img/imgname.png’,而实际则会出现:
‘static/css/static/img/imgname.png’,注意,这里static/css是多余的。

解决方法有2个:
1.在template中直接设置style=”background-image:url(”)”;
2.在webpack配置文件夹找到utils.js,作以下更改:
**增加publicPath**

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
//增加publicPath
publicPath: ‘../../’,
fallback: ‘vue-style-loader’
})
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理