在项目开发中，一般写相对路径是没有问题的，但是在项目比较大的情况下，我的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. Git 移除某些文件

    一.前言 在使用 Git 版本控制中,有些文件是不需要加入到版本控制中的.如 日志( log ).编译的文件.这些随时都在变的文件,使用用一个代码库的用户.只要稍稍修改一点,或者启动一下,就会变.容易 ...

  2. IOS Carthage安装、使用

    一.Carthage的安装和使用1.安装homebrew后输入如下命令 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercont ...

  3. ZOJ3175【公式化函数的思想】

    题意:  给出f(n,m)(m<n)的定义:大于m并且小于n的能整除m的数的个数. F(n)为m从1至n的f(n,m)的和. 给出n,求F(n). 思路: 就是计算n/1 +  n/2 + n/ ...

  4. AtCoder Regular Contest 061 E - すぬけ君の地下鉄旅行【最短路】

    具体题解又要搬大哥的了,嘿嘿~ 请点击:G点我 这道题目的难点就是同一家公司的路直接走不需要再花费,然后多了一个公司这个东西,这个不像是边的副权值(瞎说的)之类的东西,这是对于路来说的,路的属性... ...

  5. 强大的在线web编辑器UEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor在线演示地址:http://u ...

  6. 渲染路径-u3d渲染路径比较

    Unity支持不同的渲染路径.应具体取决于你的游戏内容和目标平台/硬件来选择使用哪一个.不同的渲染路径有不同的特点和性能特点,主要影响灯光和阴影.        项目所使用的渲染路径在Player S ...

  7. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...

  8. 【BZOJ4548】小奇的糖果

    →原题传送门←(by Hzwer) 「题目背景」 小奇不小心让糖果散落到了地上,它对着满地的彩色糖果胡思乱想. 「问题描述」 有 N 个彩色糖果在平面上.小奇想在平面上取一条水平的线段,并拾起它上方或 ...

  9. math(2018.10.27)

    20%的数据直接暴搜就行,接下来我们考虑哪些数不能够出现在同一个集合中,就连一 条边,我们会发现前

  10. 关于JS中的call()方法和apply() 暂时只接触到call() 等接触到apply()再回头来看

    1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...