vue-cli@2中公共scss文件中使用背景图片loader报错的问题

1、首先安装css-loader、resolve-url-loader、sass-loader

    npm i css-loader -D
    npm i resolve-url-loader -D
    npm i sass-loader -D
    npm i node-sass -D

2、在webpack.base.conf.js中找到/.scss$/的loader，如没有就新增，修改为：

    {
    test:/\.scss$/,
    use:[
      {
        loader:'css-loader',
        options:{
          sourceMap:true,
          sourceMapContents:false
        }
      },
      {
        loader:'resolve-url-loader',
        options:{
          sourceMap:true,
          sourceMapContents:false
        }
      },
      {
        loader:'sass-loader',
        options:{
          sourceMap:true,
          sourceMapContents:false
        }
      }
    ]
  }

3、修改utils.js（build=>utils.js）新增：

找到如下位置新增

if(loader==='sass'){
  loaders.push({
    loader:'resolve-url-loader',
    options:Object.assign({},loaderOptions,{
      sourceMap:options.sourceMap
    })
  })
}

4、修改index.js(config=>index.js)

在dev中找到并修改为true
cssSourceMap: true

5、运行项目即可查看到效果。

• 注意：如果有以下报错：this.getResolve is not a function,需修改sass-loader的版本为7.3.1

• 这里修改为7.3.1版本

    npm uninstall sass-loader -D //先卸载
    npm i sass-loader@7.3.1 -D //再安装
  

6、如果仍然报错：找不到图片路径，再修改utils.js(build=>utils.js)

新增：
publicPath:'/',

• 写在最后：注意，每次修改完配置文件后需重新启动项目。