在项目开发中，一般写相对路径是没有问题的，但是在项目比较大的情况下，我的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. ASP.NET学习笔记（一）相关概念

    ASP.NET 是一个开发框架,用于通过 HTML.CSS.JavaScript 以及服务器脚本来构建网页和网站. ASP.NET 支持三种开发模式: Web Pages MVC Web Forms ...

  2. 关于Angular6版本升级和RXJS6新特性的讲解

    从Angular5升级到Angular6, angular6相比较于angular5 总体变化不大,但是在RXJS上面却有一些变动,不得不说,虽然很讨厌break update但是RXJS6的新特性对 ...

  3. 洛谷 - P2551 - 华夏60战斗机 - 简单dp

    https://www.luogu.org/problemnew/show/P2551 首先这道题没有给Hm的最大值,很坑,只能随便开一个100没想到还过了. 观察题目,发现虽然高度可以变化,但是速度 ...

  4. Legacy C++ MongoDB Driver

    https://docs.mongodb.com/ecosystem/drivers/cpp/

  5. HDU4791【杂】

    题意: 给你一个从0开始的区间si,每个区间是前闭后开,[ s[i] , s[i+1] ), 然后再给你个一个pi,代表你在区间[ s[i] , s[i+1] )里面买东西的单价是pi,给出的s1一定 ...

  6. [Xcode 实际操作]七、文件与数据-(23)UI Testing系统界面测试功能的使用

    目录:[Swift]Xcode实际操作 本文将演示UI Testing系统界面测试功能的使用. 如果项目中尚未引入界面测试功能,请点击项目属性面板->[General]面板左下角的[+]图标 - ...

  7. [Xcode 实际操作]九、实用进阶-(8)实现App的Setting设置：添加和读取程序的配置信息

    目录:[Swift]Xcode实际操作 本文将演示如何实现添加和读取程序的配置信息. 在项目文件夹[DemoApp]上点击鼠标右键->[New File]创建一个设置束文件 ->[Sett ...

  8. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  9. 分布式集群环境下，如何实现session共享五（spring-session+redis 实现session共享）

    这是分布式集群环境下,如何实现session共享系列的第五篇.在上一篇:分布式集群环境下,如何实现session共享四(部署项目测试)中,针对nginx不同的负载均衡策略:轮询.ip_hash方式,测 ...

  10. Turtles (非纯分块)

    http://codeforces.com/contest/103/problem/D #include <bits/stdc++.h> using namespace std; type ...