乐趣区

基于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’
})
}

退出移动版