前言：
????在Vue中引用外部SCSS(SCSS里面使用了圖片)時(shí)，loader報(bào)錯(cuò)：
* ../images/xxx.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
? ? 原因：
????????1. 某*.scss文件引用了其它目錄的圖片文件
? ? ? ? 2.?在app.vue中使用scss時(shí)，用scss的語法引入了該*.scss文件
? ? ? ? 3. 最終loader解析圖片路徑出錯(cuò)
前端web目錄：
環(huán)境：
需要先安裝 node-sass及sass-loader
npm i node-sass --save-dev
npm i sass-loader --save-dev
在vue中的錯(cuò)誤使用：
1. 在app.vue中使用
<style lang="scss">
? ? @import './assets/style/index.scss'
</style>
*這種引入方法的前提是：在*.scss中沒有使用到圖片時(shí)編譯通過。當(dāng)在scss中引用圖片時(shí)幻碱，編譯報(bào)錯(cuò)，loader錯(cuò)。原因是路徑解析錯(cuò)誤鸭丛。
? ? 2. index.scss
.test {
background-image:url("../images/xxx.png");
}
解決在scss中引用圖片路徑報(bào)錯(cuò):
方法1:在mian.js中引入，這種引入方式時(shí)唐责，scss中圖片使用相對路徑
require('./assets/style/index.scss')
或 import './assets/style/index.scss'
方法2:在app.vue中引入鳞溉，借助webpack的`~`前綴
<style lang="scss">
? ? @import '~@/assets/style/index'
</style>
* css loader 會把非根路徑的url解析為相對路徑，加`~`前綴才解析為模塊路徑鼠哥。
在index.scss中使用圖片：
.test {
? ? background-image: url("./assets/image/xxx.png");
? ? background-repeact: no-repeact;
}
方法3:在*.vue中的scss中直接使用圖片
方法4:在*.vue中直接通過require引用圖片熟菲，然后在html中通過 :style="{backgroundImage: 'url('+ 變量 +')'}" 綁定使用
