前端运行项目时，多个css样式打包错乱问题

最新推荐文章于 2023-09-08 16:41:54 发布

原创最新推荐文章于 2023-09-08 16:41:54 发布 · 635 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #webpack

本文介绍了解决因不同文件夹中相同文件名导致的样式错乱问题。通过在Webpack打包配置中加入contenthash，确保每个文件的唯一性，避免了样式混淆。

在优化代码时，优化webpack打包配置时，发现样式错乱
需求背景：有多个图片文件夹，不同的文件夹内图片名称相同，在不同的vue文件内引入不同的文件家里的相同的文件名字，发现样式错乱
原因：打包时没有加hash
解决方案：打包时增加contenthash

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

瑞瑞w

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用

高级前端工程师

10-29

6936

乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的

vue工程打包上线样式错乱问题 - bug解决（4种）

草巾冒小子的博客

03-13

1万+

vue工程打包上线样式错乱问题 - bug总结项目开发完成后，执行npm run build 进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 1.main.js样式引入顺序问题 ...

参与评论您还未登录，请先登录后发表或查看评论

vue 路由跳转，导致页面样式错乱，刷新又好了的情况

热门推荐

魏晋-

03-05

1万+

在项目开始的时候，把所有的代码都码好。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。而且我在每个组件页面里面写的公共样式css，都删除掉scoped,这种情况下，跳转后页面的样式会沿用了前一个页面的样式，导致页面错乱。解决办法:在跳转前和跳转后页面的style上加上scoped，把公共样式写到分别写到子组件就OK了 <style scoped&...

vue路由跳转后页面样式错乱，刷新一下又好了的问题

一如年少丶的博客

05-04

1万+

前言如图所示，当我从profile页跳转回index页时，页面样式错乱：这是index页面一开始的样子，然后我们跳转到profile页面这是profile页面，然后我们再跳转回index页面这个时候问题就来了，可以明显的看到首页的样式被破坏了，那么为什么会这样呢？思考想了一下意识到，大概率是因为vue加载组件的时候，会把所有组件的css全部加载到一起，而这个时候样式是全局的，vu...

(css)项目打包部署上线后css样式错乱

nyf_unknow的博客

06-16

866

(CSS)项目打包部署上线后css样式错乱

【webpack打包 css顺序异常问题解决】

limuzhixing的博客

11-11

917

webpack打包 css顺序异常问题解决

bug-本地页面布局正常，打包后布局混乱问题解决

岂不闻

09-08

986

2.Scoped 避免组件间存在同名类名的时候样式污染。考虑打包后对于样式处理渲染的问题调试依旧样式缺失；3./deep/对于引用的组件对应样式的修改！在进行上面四步的操作后打包后页面布局依旧混乱。某个样式不生效，或者生效的样式不是本地写的样式。（标准通用标记语言的一个子集）等文件样式的计算机语言。4.进行对提出的公共样式的引入多个。在一个组件中需要引入的公共样式应放在自定样式。1.在写样式的时候用的是less。正常打包过程中涉及到的一些操作。考虑到样式污染，或者打包样式丢失。

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

CRPER

08-04

1132

测试小伙伴们在集成测试中反馈了一个问题，Safari 12访问项目个别页面场景样式错乱了。我的第一直觉认为postcss那边处理出了问题，最后发现并不然，且听我道来！

Webpack提取CSS文件顺序异常问题分析

“extract-text-plugin-bug”这一项目标题所反映的是一个与前端构建工具 Webpack 相关的技术问题，具体涉及 `extract-text-webpack-plugin` 插件在处理多个 CSS 文件时可能出现的样式顺序错乱 bug。该项目通过一个...

基于TypeScript的大数据项目前端实现

尤其在大数据前端项目中，由于涉及复杂的状态管理、异步数据请求、组件通信等问题，TypeScript的类型检查机制能够有效避免因数据结构不一致导致的运行时错误，例如API返回字段缺失或类型错乱等问题。进一步分析...

vue项目打包之后样式错乱问题，如何处理

weixin_30394633的博客

07-05

2556

最近公司做的这个项目，要大量修改element里面的css样式，所以项目打包之后会出现样式和本地开发的时候样式有很多不一样，原因可能是css加载顺序有问题，样式被覆改了。所以在mian.js里面这样修改： ‘./APP’和'./router'放在element css的后面，router放到最后还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之...

vue项目 build 打包后部分样式错乱问题

技小白的博客

08-03

9199

我在做一个页面加载loading 效果的时候，改了很多样式，有全局的有私有的,以至于到最后把自己都搞乱了不知道改过什么东西，最后在build打包上线后出现了部分样式显示错乱（主要是全局样式），影响到了整个页面，当时都懵了，怎么也找不到问题。墨迹到了晚上九点钟。在网上查了很多资料。最终解决，特意在这里记录一下，发现网上关于这种问题的回答挺少的所以我找了好久，希望我的回答可以贡献一点力量，让同样遇到这个问题的小伙伴不迷茫。直接上代码：其实只需简单两步就OK。 1，在build 文件夹下 webpack.p

vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

10-08

772

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图：后来在网上查了一下，发现可能是optimize-css-assets-webpack-plugin这个插件的问题，导致打包时这个属性和注释混在了一起（个人猜测）,其实解决办法很简单，只需要在这...

【前端技术】Vue在打包之后出现Css样式冲突，解决方法。

weixin_41711265的博客

11-03

6078

先说问题 1：在做vue项目打包时出现Css样式冲突的问题。在本地运行项目时样式都是正常，但在服务器进行打包之后项目的整体样式就有问题了。举例说明： 1.图片大小发生变化，怎么改也改不好。 2.在查看F12中会多出当前页面没有设置过的Css样式。 3.或者是设置过的样式，在F12中显示带“黑线”的也就是被注释的。 4.页面样式跑偏等等。都有可能是Css样式冲突造成的,不清楚大家是不是这样的,反正我是这样的。经过这次的问题,把我遇到的解决办法记录一下, 遇到的解决方案 1.第一种方法可以选择在

vue项目本地样式正常，部署服务器后出现样式错乱的问题

Harden3的博客

03-23

6301

vue项目本地样式正常，部署服务器后出现样式错乱的问题

html 清理多余样式,webpack去除冗余css样式删除多余css

weixin_35126200的博客

06-17

1499

webpack打包css时，一般时压缩css，但css有很多用不到类和属性，有什么办法可以除冗余css样式删除多余css，特别是在使用一些bootstrap的前端框架时，可使用purifycss和PurifyCSS-webpack去掉页面不用的多余css。PurifyCSS使用PurifyCSS可以大大减少CSS冗余,消除框架中未使用的CSS,初步达到按需引入的效果。1.如何在webpack中使用...

解决前端打包后线上样式与测试环境样式不一样bug

m0_73267676的博客

05-26

3300

打包后会出现文件夹，文件夹里会有img，css，js文件夹，所有的css样式都会被压缩到css文件夹里，在不同文件中做的相同的css名的操作会合并在一起所以产生了污染，就造成了本地与线上不一致的情况。在两个页面都打开调试台排查bom树检查不一样的地方，首先确定排查方向，线上页面tatle和暂无数据的div发生了并列，所以着重排查这两个div子级父级的dom元素，终于在线上bom样式上发现了猫腻。前天一个功能页面完成了，本地测试一切正常，自己打包上线后线上展示完全与本地展示的不一样。

vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？

weixin_30332241的博客

01-22

513

我使用vue-cli搭自己的博客，希望引入公共样式： // main.js import './assets/styles/common.css' 我本来是希望webpack打包后，能将这个样式独立打包，在生成的html文件中用<link href='/static/css/common.css'>这样的形式引入，这样浏览器就能缓存，各个页面需要的话就import一下，也不用...

vue中写html样式出错,vue引入css打包出错的问题

weixin_34208400的博客

05-30

501

我在main.js引用的时候import "mui.min.css";，npm run dev是没有问题的，但是npm run build 就报错ERROR in ./~/css-loader?{"minimize":true,"sourceMap":true}!./src/assets/css/mui.min.cssModule build failed:@ ./~/css-loader?{"m...