在做项目过程中,发现引用了图片的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. sublime text3开发python并设置快捷键

    Package Control 安装方法 1.通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码: 2.Sublime T ...

  2. Spring MVC请求执行流程

    学习Spring MVC时间有点长了,但是最近打算找工作,需要重新了解下,所以又去温故知新了.Spring MVC就是用来写web的框架,简化你写web的一些不必要的流程,让程序员能专注于业务逻辑也就 ...

  3. 简述C/C++调用lua中实现的自定义函数

    1.首先说下目的,为什么要这么做 ? 正式项目中,希望主程序尽量不做修改,于是使用C/C++完成功能的主干(即不需要经常变动的部分)用lua这类轻量级的解释性语言实现一些存在不确定性的功能逻辑:所以, ...

  4. carry-检查数据接口返回数据合法性

    问题背景: 在测试&部署监控过程中,我们常常会遇到外部接口返回数据不靠谱的时候.最常见的场合是从某个http获取如json和xml等结构化的结果,进行解析并处理,在这时候出现以下这几种常见类型 ...

  5. 一台电脑 一起跑python2 python3

    我习惯使用python2.7,命令都是使用的python和pip,这时候装了python3.4,首先到python3下修改python.exe,pythonw.exe为python3.exe,pyth ...

  6. Centos 6 PXE安装

    author:JevonWei 版权声明:原创作品 192.168.198.134作为安装服务器,由httpd服务共享安装程序 192.168.198.134作为dhcp服务器,客户机获取IP 一.安 ...

  7. 理解oracle中连接和会话

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp44 理解oracle中连接和会话 1.  概念不同:概念不同: 连接是指物 ...

  8. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  9. Spring MVC 解决无法访问静态文件和"全局异常处理"

    我们都知道,Spring MVC的请求都会去找controller控制器,若果我们页面中引入了一个外部样式,这样是没效果的, 我们引入样式的时候是通过<like href="...&q ...

  10. 软工+C(2017第4期) Alpha/Beta换人

    // 上一篇:超链接 // 下一篇:工具和结构化 注:在一次软件工程讨论课程进度设计的过程中,出现了这个关于 Alpha/Beta换人机制的讨论,这个机制在不同学校有不同的实施,本篇积累各方观点,持续 ...