鏈接：https://www.jianshu.com/p/5e81814f8d8c
在Vue中引用外部SCSS(SCSS裏面使用了圖片)時，loader報錯：
* ../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時，用scss的語法引入了該*.scss文件
3. 最終loader解析圖片路徑出錯
前端web目錄：
環境：
需要先安裝 node-sass及sass-loader
npm i node-sass --save-dev
npm i sass-loader --save-dev
在vue中的錯誤使用：
1. 在app.vue中使用
<style lang="scss">
@import './assets/style/index.scss'
</style>
*這種引入方法的前提是：在*.scss中沒有使用到圖片時編譯通過。當在scss中引用圖片時，編譯報錯，loader錯。原因是路徑解析錯誤。
2. index.scss
.test {
background-image:url("../images/xxx.png");
}
解決在scss中引用圖片路徑報錯:
方法1:在mian.js中引入，這種引入方式時，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;
}
