在做项目过程中，发现引用了图片的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. linux(一)之linux简介

    其实在前几天我使用的是csdn来写博客,尝试了一下,发现真的太浪费时间了.可能是自己不太习惯的原因吧.所以最后还是换回使用博客园.接下来给大家带来的是linux,大家听到这里linux感觉很神秘的样子 ...

  2. web中转发、重定向等问题的路径

    web中常用路径,转发,重定向,form表单action的路径 路径的写法: a.绝对路径写法:ServeltContext都必须用绝对路径."/" b.相对路径:其他情况都可以使 ...

  3. 使用php下载的文件打不开，自己用着没问题，客户用就不行？

    1 现象: 开发的时候用的好好的文件下载功能,部署到客户那边就不好使了,几乎所有从服务器下载下来的文件都不能打开. 比较了上传前的文件.上传后服务器端的文件.下载后本机的文件,发现同一个文件,上传后还 ...

  4. jquery的2.0.3版本源码系列(4):285-348行，extend方法详解

    目录 1 . jquery extend的基本使用 通过285行的源码 jQuery.extend = jQuery.fn.extend = function() { ,extend方法要么是直接挂在 ...

  5. linux（十）之初始化文件

    前面写了很多linux的知识,其实很多都是命令的,所以要去多多的练习才能学的更好,加油为了好工作. 要么现在懒惰,未来讨饭.要么现在努力,未来惬意. 一.初始化文件概述 1.1.概述 系统初始化文件是 ...

  6. BeautifulSoup练习第一节

    一.pip install beautilfulsoup4 二.主要使用html.parser这个python标准库 三.打印首页博客的时间.打印摘要 # coding:utf-8from bs4 i ...

  7. Cognos报表调度与作业管理

    本文针对Cognos的报表调度和作业管理做案例分析.为了测试报表定时调度功能,本文将报表定时输出到指定的归档目录. 1. 测试环境 Cognos  V11.0 2. 设置档案文件根目录 Cognos报 ...

  8. C# .NET Socket 简单实用框架

    背景: 首先向各位前辈,大哥哥小姐姐问一声好~ 这是我第一次写博客,目前为一个即将步入大四的学生,上学期在一家公司实习了半年,后期发现没有动力,而且由于薪水问题(废话嘛),于是跳槽到这家新的公司. 说 ...

  9. 第1阶段——uboot分析之仿照bootm制作hello命令(7)

    仿照bootm命令生成来制作一个hello命令,功能:打印出hello,world!和参数值 1.点击New File ,创建cmd_hello.c将./common/cmd_bootm.c的头文件复 ...

  10. JS的this总结(上)-call()和apply()

    JS的this总结(上)-call()和apply() ​ 相信很多人在学习JavaScript的过程中,都会了解到this,而大部分人都会特意去网络上搜一下相关资料,大部分的文章都有这么一句话: t ...