webpack:sass-loader, scss中使用url加载图片报NotFound的三个解决方法

问题描述：

使用vue-cli搭建好vue项目结构后，我在Home.scss中使用background-image: url('../../images/home_banner.jpeg');加载一个背景图片，没想到报错：

This relative module was not found:

* ../../images/home_banner.jpeg in ./node_modules/[email protected]@css-loader?{
   "sourceM
ap":false}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{
   "vue":true,"id
":"data-v-5a90ec03","scoped":false,"hasInlineConfig":false}!./node_modules/_sass-loader@7.
1.0@sass-loader/lib/loader.js?{
   "sourceMap":false}!./node_modules/[email protected]@vue-lo
ader/lib/selector.js?type=styles&index=0!./src/pages/Home.vue复制代码

那这是为什么呢？虽然这是sass-loader的一个已知的问题，还是要把解决过程记录下来，丰富自己也造福后来人。

版本描述：

"sass-loader": "^7.1.0",
"vue": "^2.5.2",
"webpack": "^3.6.0"