在做项目过程中，发现引用了图片的less文件被extract-text-webpack-plugin打包过之后，里面的图片引用路径指向到了extract-text-webpack-plugin打包目录下了，出现了找不到图片问题。

new ExtractTextWebpackPlugin({ filename: 'css/[name].css' });
 
这种情况可能的解决方案之一: 在webpack的配置文件的output中配置publicPath即可。

extract-text-webpack-plugin打包css后出现图片引用路径不对问题的更多相关文章

  1. webpack快速入门——CSS分离与图片路径处理

    1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...

  2. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

  3. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  4. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  5. webpack踩坑之路 (2)——图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. ...

  6. ThinkPHP的调用css,js和图片的路径

    按网上的说法,在根目录下建了一个Public目录,把css,js和图片放到Public目录下,然后用__PUBLIC__/...或__ROOT__/Public/...调用.但是发现无论如何改路径都无 ...

  7. webpack分离打包css和less

    github仓库:https://github.com/llcMite/webpack.git 为什么要分离打包?       答:刚开始学webpack的时候就很郁闷,明明没几个文件,打包出来体积特 ...

  8. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  9. webpack打包 css文件里面图片路径 替换位置

    { test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader ...

随机推荐

  1. asp.net mvc 接入美圣短信 验证码发送

    第1步:登录美圣短信控制台 http://www.rcscloud.cn/hy/HY_ZH/login 账号:******* 密码:******* http://www.rcscloud.cn/com ...

  2. Java基础---IO(三)--IO包中的其他类

    第一讲     对象序列化 一.概述 将堆内存中的对象存入硬盘,保留对象中的数据,称之为对象的持久化(或序列化).使用到的两个类:ObjectInputStream和ObjectOutputStrea ...

  3. 后PMP时代下的敏捷项目管理全国在线讲座

    活动时间:2017年9月7日(周四)  19:00-21:00 活动形式:在线直播 本次活动免费 互联网经济冲击下,产品创新成为企业生存的关键,"双模"成为很多企业必然的选择,传统 ...

  4. throws Exception方法异常处理机制

    public class T4 { private String sex; public String getSex() { return sex; } public void setSex(Stri ...

  5. jenkins 每个月1号到7号 一天执行一次

    在线Crontab表达式执行时间验证 / crontab执行时间计算 - aTool在线工具验证 http://www.atool.org/crontab.php 1.Build periodic a ...

  6. 学习python的*args和 **kwargs

    *args表示任何多个无名参数,它是一个tuple(元组):**kwargs表示关键字参数,它是一个dict(字典) def foo(*args, **kwargs): print 'args = ' ...

  7. 9-9害死人不偿命的(3n+1)猜想

    1001. 害死人不偿命的(3n+1)猜想 (15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 卡拉兹(Ca ...

  8. Python 多线程库总结

    多线程库总结 基于线程的并行性 threading模块 下面是一些基础函数,函数包括: 函数 threading.active_count() threading.current_thread() t ...

  9. Python3 多线程的两种实现方式

    最近学习 Python3 ,希望能掌握多线程的使用,在此做个笔记.同时也希望Python 牛人指点错误.关于线程的概念,前面简单总结了一下 java 的多线程,传送门:java 多线程概念,三种创建多 ...

  10. MPLS VPN随堂笔记1

    MPLS VPN 基础 1.MPLS vpn架构的特点 1.1.允许不同CE传递相同私网路由 1.2.SP内部(所有P路由器)不需要学习CE路由 1.3.无安全保障但有带宽保障(跟SP租用服务) 2. ...