在项目开发中，一般写相对路径是没有问题的，但是在项目比较大的情况下，我的scss文件可能为了方便管理，会放在不同的文件夹下，有的可能又不需要放在文件夹下,比如我的scss文件结构如下：

module

common.scss

test.scss

about

about.scss

login.scss

index.scss

比如目录是这样的，common.scss里用相对路径引用的图片，那about文件下的login.scss @import common.scss， 同时index.scss 也@import common.scss，那路径就不能同时满足2个个scss文件的需求，我们就需要用绝对路径来处理，那如何用绝对路径呢？

开始尝试了用webpack的插件resolve-url-loader去解决，不过折腾半天还是没有实现，最后是通过在公共的common.jsx文件里直接require(' common.scss'),这样别的模块在需要使用公共模块common.jsx的时候，require('common.jsx')连同scss文件一起引入进去了，这样就解决了图片路径的问题了。当然这只是其中的一个方法

如何解决webpack中css背景图片的绝对地址的更多相关文章

  1. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  2. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  3. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  4. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  5. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  6. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  7. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  8. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  9. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

随机推荐

  1. bat批处理教程

    批处理的本质,是一堆DOS命令按一定顺序排列而形成的集合 1.ping sz.tencent.com > a.txt 把前面信息放到a.txt中 ping sz.tencent.com > ...

  2. C#基础：通过委托给任何对象数组进行排序

    在日常编写程序的时候,我们需要对一些对象进行排序,比如对int数组进行排序,自定义类数组进行排序,首先我们先讨论对数组进行排序,我们应该对冒泡排序比较熟悉,下面是数组用冒泡排序的方法 for (int ...

  3. 升级到Angular6后对老版本的RXJS代码做相应的调整

    还没有了解过RXJS6的童鞋,可以查看我的另外一篇博文,此篇博文主要是对于RXJS5升级到RXJS6的代码调整示例 RXJS5版本 在RXJS5上我们是这样写请求的 import 'rxjs/add/ ...

  4. Codeforces Round #375 (Div. 2)【A，B【模拟】，D【DFS】】

    PS_B:阿洗吧!B题卧槽数组开了250... PS_D:D题主要挂在了50*50口算得了250,数组开小,然后一开始还错了.= =哎,以后对于数据范围还是注意一点: 卧槽,这场可真二百五了... A ...

  5. Python 实现简单的登录注册界面

    Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

  6. PostgreSQL-5-条件过滤

    基本语法 SELECT column1, column2, columnN FROM table_name WHERE [search_condition] 操作符 =等于:<>不等于:! ...

  7. ko.js循环绑定值问题(工作遇见)

    fewTags()这是一个数组,循环实现以上效果,箭头所指的不属于循环出来的值, 以前循环是绑定在<div class="file-tag-list">中造成编辑不能在 ...

  8. 《统计学习方法》笔记九 EM算法及其推广

    本系列笔记内容参考来源为李航<统计学习方法> EM算法是一种迭代算法,用于含有隐变量的概率模型参数的极大似然估计或极大后验概率估计.迭代由 (1)E步:求期望 (2)M步:求极大 组成,称 ...

  9. odoo9 部署步详细步骤

    sudo apt-get updatesudo apt-get dist-upgrade 一:安装和配置pg sudo apt-get install  postgresql sudo su - po ...

  10. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...