在Vue中使用sass及sass图片路径问题
前言: 在Vue中引用外部SCSS(SCSS里面使用了图片)时,loader报错:* ../images/xxx.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id&q
前言:
在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;
}
方法3:在*.vue中的scss中直接使用图片
方法4:在*.vue中直接通过require引用图片,然后在html中通过 :style="{backgroundImage: 'url('+ 变量 +')'}" 绑定使用
作者:TinyEE
链接:https://www.jianshu.com/p/5e81814f8d8c
更多推荐
所有评论(0)