在做项目过程中，发现引用了图片的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. Android辅助功能原理与基本使用详解-AccessibilityService

    辅助功能原理与基本使用详解 本文主要介绍辅助功能的使用 辅助功能基本原理 辅助功能基本配置和框架搭建 辅助功能实战解析 辅助功能基本原理   辅助功能(AccessibilityService)其实是 ...

  2. TCP协议三次握手与四次挥手通俗解析

    TCP/IP协议三次握手与四次握手流程解析 一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式 上图中有几个字 ...

  3. tomcat设置文件编码

    tomcat修改bin文件夹下面的catalina.bat文件可以解决乱码在文件中加上JAVA_OPTS="-server -Xms128M -Xmx4096M -XX:PermSize=5 ...

  4. 创建WIFI热点--附近的百度帐号

    前提准备: 前提是当前的网卡必须支持AP(Acess Point)模式, 也可以使用外接的usb网卡 nodeJS环境 安装create_AP 使用create_AP创建热点, 安装方式为: git ...

  5. svn: Can't convert string from 'UTF-8' to native

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt227 svn 版本库中有文件是以中文字符命名的,在 Linux 下 chec ...

  6. 学习笔记GAN004:DCGAN main.py

    Scipy 高端科学计算:http://blog.chinaunix.net/uid-21633169-id-4437868.html import os #引用操作系统函数文件 import sci ...

  7. 怎么调用api接口

    api的简单调用,调用api的方法 方法一:用前端方法调用api 完整代码: <!DOCTYPE html> <html lang="en"> <he ...

  8. 集美大学网络1413第十五次作业成绩（团队十） -- 项目复审与事后分析（Beta版本）

    题目 团队作业10--项目复审与事后分析(Beta版本) 团队作业10成绩 --团队作业10-1 Beta事后诸葛亮  团队/分值 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色 ...

  9. 201521123107 《Java程序设计》第13周学习总结

    第13周-网络 1.本周学习总结 2.书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ...

  10. 【Alpha阶段汇总】成果展示与体验总结

    一.燃尽图 二.软件截图 三.代码与图片.音乐素材仓库 git仓库 四.问题与总结 1.git提交问题 之前创建的仓库地址是http://git.oschina.net/8265559926/grou ...