在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":"data-v-7ba5bd90","s...

陌途i

3814人浏览 · 2020-04-30 14:28:39

陌途i · 2020-04-30 14:28:39 发布

前言：

在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中使用

@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的`~`前缀

@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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^