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 ...
随机推荐
- SHELL读取 ini 格式文件做配置文件
ini文件格式一般都是由节.键.值三部分组成 格式: [第一节 ] 第一个键 = 值 第二个键 = 第二个值 [第二节 ] 第一个键 = val1,val2,val3 例子: [COM] KINGGO ...
- 面向对象property属性、静态方法和类方法
一.property属性 1.什么是property特性? property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值. from math import pi class Circl ...
- eclipse——Maven创建JavaWeb工程
打包方式改为war 问题:webapp目录下缺少web.xml文件 先勾选掉Dynamic Web Services 点击Applay 再勾选上Dynamic Web Services ,目的是为了产 ...
- Python 面向对象class(2)
Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...
- Monkey稳定性测试环境搭建说明
一.安装Java环境 安装Java环境-JDK:下载地址:http://pan.baidu.com/s/1pJ6Yqs7,jdk安装解压即可. 二.设置环境变量 双击下载的JDK ,设置安装路径.这里 ...
- What is the AppData folder?
Applies to Windows 8.1, Windows RT 8.1 The AppData folder contains app settings, files, and data spe ...
- URAL 1748. The Most Complex Number(反素数)
题目链接 题意 :给你一个n,让你找出小于等于n的数中因子个数最多的那个数,并且输出因子个数,如果有多个答案,输出数最小的那个 思路 : 官方题解 : (1)此题最容易想到的是穷举,但是肯定超时. ( ...
- 《深度学习原理与TensorFlow实践》喻俨,莫瑜
1. 深度学习简介 2. TensorFlow系统介绍 3. Hello TensorFlow 4. CNN看懂世界 5. RNN能说会道 6. CNN LSTM看图说话 7. 损失函数与优化算法 T ...
- [LintCode笔记了解一下]39.恢复旋转排序数组
思路: 1.需要O(n)的事件复杂度,所以多次循环不考虑 2.四步翻转法 -第一步,找到数组里最小的那个数字,因为是旋转排序数组,所以只要找到某个位置arr[i]>arr[i+1]的话,就找到了 ...
- 自建脚手架之配置中心--LightConf的实现
常规项目开发过程中, 通常会将配置信息位于在项目resource目录下的properties文件文件中, 配置信息通常包括有: jdbc地址配置.redis地址配置.活动开关--等等.因此每次上线或者 ...