Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题
【解决方法】:
更改build/utils.js
文件中的 ExtractTextPlugin 的 options配置.
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
这样配置以后,在scss文件里面,引入路径为 background-image: url(../img/brokers.jpg);
.vue文件里面,按照常的绝对路径引入就好,<img src="../img/icon-wht-cash-stack.png" />
参考文章:https://www.cnblogs.com/zhangrunhao/p/7114989.html
Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题的更多相关文章
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类
此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...
- angular4模块中标签添加背景图
一.现象 一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = [& ...
- gtk中构件添加背景图
在gtk中我们总想要去给构件添加背景图,具体函数代码如下 void chang_background(GtkWidget *widget, int w, int h, const gcha r *pa ...
随机推荐
- SQL 数据库 学习 002 如何启动 SQL Server 软件
如何启动 SQL Server 软件 我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Express 如果你还没有下载 SQL Serv ...
- 数字图像处理实验(9):PROJECT 04-05,Correlation in the Frequency Domain 标签: 图像处理MATLAB 2017-05-25 10:14
实验要求: Objective: To know how to implement correlation of 2 functions in the frequency domain and, us ...
- Part3_lesson4---协处理器访问指令
1.什么是协处理器? CP15是协处理器, CP15的作用:系统控制协处理器CP15,它提供了额外的寄存器,这些寄存器用于配置和控制cache,MMU,保护系统,时钟模式,和其他的系统项,比如大小端操 ...
- bootstrap三列布局
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- 编写高质量代码改善C#程序的157个建议——建议61:避免在finally内撰写无效代码
建议61:避免在finally内撰写无效代码 在阐述建议之前,需要先提出一个问题:是否存在一种打破try-finally执行顺序的情况,答案是:不存在(除非应用程序本身因为某些很少出现的特殊情况在tr ...
- wcf文件上传时碰到的配置问题
1.远程服务器返回了意外相应:(413) Request Entity Too Large 修改客户端配置maxReceivedMessageSize="2147483647" & ...
- asp.net winform 界面传值
第一种 //form1 //静态传值 public static string Chuanzhi; string Chuanzhi = textbox.text; //form2 string Chu ...
- MariaDB 一些SQL语句的执行
通过拼接的TAG_NAME字符串获取对应的TAG_ID字符串 形如: '丹药|练功流|轻松|学生|学院风' 查询结果:'10|35|36|40' SELECT GROUP_CONCAT(TAG_ID ...
- curl下载目录
http://ftp.loongnix.org/os/loongnix/1.0/SRPMS/ wget wget -c -r -np -k -L -p
- plantix插件工具,eclipse工具
代码修改后部署流程: 修改代码-->自动构建工作空间(将修改的代码或配置文件复制到classes文件夹)-->发布到tomcat环境中-->重启服务器运行 常见报错:java.lan ...